<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/semantics.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:32 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=dom.html>← 3 Semantics, structure, and APIs of HTML documents</a> — <a href=index.html>Table of Contents</a> — <a href=sections.html>4.3 Sections →</a></nav><ol class=toc><li id=toc-semantics><a href=semantics.html#semantics><span class=secno>4</span> The elements of HTML</a><ol><li><a href=semantics.html#the-root-element><span class=secno>4.1</span> The document element</a><ol><li><a href=semantics.html#the-html-element><span class=secno>4.1.1</span> The <code>html</code> element</a></ol><li><a href=semantics.html#document-metadata><span class=secno>4.2</span> Document metadata</a><ol><li><a href=semantics.html#the-head-element><span class=secno>4.2.1</span> The <code>head</code> element</a><li><a href=semantics.html#the-title-element><span class=secno>4.2.2</span> The <code>title</code> element</a><li><a href=semantics.html#the-base-element><span class=secno>4.2.3</span> The <code>base</code> element</a><li><a href=semantics.html#the-link-element><span class=secno>4.2.4</span> The <code>link</code> element</a><ol><li><a href=semantics.html#processing-the-media-attribute><span class=secno>4.2.4.1</span> Processing the <code>media</code> attribute</a><li><a href=semantics.html#processing-the-type-attribute><span class=secno>4.2.4.2</span> Processing the <code>type</code> attribute</a><li><a href=semantics.html#fetching-and-processing-a-resource-from-a-link-element><span class=secno>4.2.4.3</span> Fetching and processing a resource
  from a <code>link</code> element</a><li><a href=semantics.html#processing-link-headers><span class=secno>4.2.4.4</span> Processing `<code>Link</code>` headers</a><li><a href=semantics.html#early-hints><span class=secno>4.2.4.5</span> Early hints</a><li><a href=semantics.html#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element><span class=secno>4.2.4.6</span> Providing users with a means to follow hyperlinks created using the <code>link</code>
  element</a></ol><li><a href=semantics.html#the-meta-element><span class=secno>4.2.5</span> The <code>meta</code>
  element</a><ol><li><a href=semantics.html#standard-metadata-names><span class=secno>4.2.5.1</span> Standard metadata names</a><li><a href=semantics.html#other-metadata-names><span class=secno>4.2.5.2</span> Other metadata names</a><li><a href=semantics.html#pragma-directives><span class=secno>4.2.5.3</span> Pragma directives</a><li><a href=semantics.html#charset><span class=secno>4.2.5.4</span> Specifying the document's character encoding</a></ol><li><a href=semantics.html#the-style-element><span class=secno>4.2.6</span> The <code>style</code> element</a><li><a href=semantics.html#interactions-of-styling-and-scripting><span class=secno>4.2.7</span> Interactions of styling and scripting</a></ol></ol></ol><h2 id=semantics><span class=secno>4</span> The elements of HTML<a href=#semantics class=self-link></a></h2>

  <h3 id=the-root-element><span class=secno>4.1</span> The document element<a href=#the-root-element class=self-link></a></h3>

  <h4 id=the-html-element><span class=secno>4.1.1</span> The <dfn data-dfn-type=element><code>html</code></dfn> element<a href=#the-html-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html title="The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.">Element/html</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLHtmlElement title="The HTMLHtmlElement interface serves as the root node for a given HTML document. This object inherits the properties and methods described in the HTMLElement interface.">HTMLHtmlElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-html-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-html-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As document's <a id=the-html-element:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>.<dd>Wherever a subdocument fragment is allowed in a compound document.<dt><a href=dom.html#concept-element-content-model id=the-html-element:concept-element-content-model>Content model</a>:<dd>A <code id=the-html-element:the-head-element><a href=#the-head-element>head</a></code> element followed by a <code id=the-html-element:the-body-element><a href=sections.html#the-body-element>body</a></code> element.<dt><a href=dom.html#concept-element-tag-omission id=the-html-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-html-element:the-html-element><a href=#the-html-element>html</a></code> element's <a href=syntax.html#syntax-start-tag id=the-html-element:syntax-start-tag>start tag</a> can be omitted
  if the first thing inside the <code id=the-html-element:the-html-element-2><a href=#the-html-element>html</a></code> element is not a <a href=syntax.html#syntax-comments id=the-html-element:syntax-comments>comment</a>.<dd>An <code id=the-html-element:the-html-element-3><a href=#the-html-element>html</a></code> element's <a href=syntax.html#syntax-end-tag id=the-html-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-html-element:the-html-element-4><a href=#the-html-element>html</a></code> element is not immediately followed by a <a href=syntax.html#syntax-comments id=the-html-element:syntax-comments-2>comment</a>.<dt><a href=dom.html#concept-element-attributes id=the-html-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-html-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-html-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-html>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-html>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-html-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlhtmlelement' data-dfn-type='interface'><c- g>HTMLHtmlElement</c-></dfn> : <a id='the-html-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-html-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  // <a href='obsolete.html#HTMLHtmlElement-partial'>also has obsolete members</a>
};</code></pre>
   </dl>

  <p>The <code id=the-html-element:the-html-element-5><a href=#the-html-element>html</a></code> element <a id=the-html-element:represents href=dom.html#represents>represents</a> the root of an HTML document.</p>

  <p>Authors are encouraged to specify a <code id=the-html-element:attr-lang><a href=dom.html#attr-lang>lang</a></code> attribute on the root
  <code id=the-html-element:the-html-element-6><a href=#the-html-element>html</a></code> element, giving the document's language. This aids speech synthesis tools to
  determine what pronunciations to use, translation tools to determine what rules to use, and so
  forth.</p>

  <div class=example>

   <p>The <code id=the-html-element:the-html-element-7><a href=#the-html-element>html</a></code> element in the following example declares that the document's language
   is English.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<strong><c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Swapping Songs<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Swapping Songs<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<strong><c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></strong></code></pre>

  </div>




  <h3 id=document-metadata><span class=secno>4.2</span> Document metadata<a href=#document-metadata class=self-link></a></h3>

  <h4 id=the-head-element><span class=secno>4.2.1</span> The <dfn data-dfn-type=element><code>head</code></dfn> element<a href=#the-head-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head title="The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.">Element/head</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadElement title="The HTMLHeadElement interface contains the descriptive information, or metadata, for a document. This object inherits all of the properties and methods described in the HTMLElement interface.">HTMLHeadElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-head-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-head-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the first element in an <code id=the-head-element:the-html-element><a href=#the-html-element>html</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-head-element:concept-element-content-model>Content model</a>:<dd>If the document is <a id=the-head-element:an-iframe-srcdoc-document href=iframe-embed-object.html#an-iframe-srcdoc-document>an <code>iframe</code> <code>srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a id=the-head-element:metadata-content-2 href=dom.html#metadata-content-2>metadata content</a>, of which no more than one is a <code id=the-head-element:the-title-element><a href=#the-title-element>title</a></code> element and no more than one is a <code id=the-head-element:the-base-element><a href=#the-base-element>base</a></code> element.<dd>Otherwise: One or more elements of <a id=the-head-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a>, of which exactly one is a <code id=the-head-element:the-title-element-2><a href=#the-title-element>title</a></code> element and no more than one is a <code id=the-head-element:the-base-element-2><a href=#the-base-element>base</a></code> element.<dt><a href=dom.html#concept-element-tag-omission id=the-head-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-head-element:the-head-element><a href=#the-head-element>head</a></code> element's <a href=syntax.html#syntax-start-tag id=the-head-element:syntax-start-tag>start tag</a> can be omitted if
  the element is empty, or if the first thing inside the <code id=the-head-element:the-head-element-2><a href=#the-head-element>head</a></code> element is an
  element.<dd>A <code id=the-head-element:the-head-element-3><a href=#the-head-element>head</a></code> element's <a href=syntax.html#syntax-end-tag id=the-head-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-head-element:the-head-element-4><a href=#the-head-element>head</a></code> element is not immediately followed by <a id=the-head-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> or a
  <a href=syntax.html#syntax-comments id=the-head-element:syntax-comments>comment</a>.<dt><a href=dom.html#concept-element-attributes id=the-head-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-head-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-head-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-head>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-head>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-head-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlheadelement' data-dfn-type='interface'><c- g>HTMLHeadElement</c-></dfn> : <a id='the-head-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-head-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();
};</code></pre>
   </dl>

  <p>The <code id=the-head-element:the-head-element-5><a href=#the-head-element>head</a></code> element <a id=the-head-element:represents href=dom.html#represents>represents</a> a collection of metadata for the
  <code id=the-head-element:document><a href=dom.html#document>Document</a></code>.</p>

  <div class=example>

   <p>The collection of metadata in a <code id=the-head-element:the-head-element-6><a href=#the-head-element>head</a></code> element can be large or small. Here is an
   example of a very short one:</p>

   <pre><code class='html'><c- cp>&lt;!doctype html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>en</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->A document with a short head<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
 ...</code></pre>

   <p>Here is an example of a longer one:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>HTML</c-> <c- e>LANG</c-><c- o>=</c-><c- s>&quot;EN&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>HEAD</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>META</c-> <c- e>CHARSET</c-><c- o>=</c-><c- s>&quot;UTF-8&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>BASE</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;https://www.example.com/&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>TITLE</c-><c- p>&gt;</c->An application with a long head<c- p>&lt;/</c-><c- f>TITLE</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>LINK</c-> <c- e>REL</c-><c- o>=</c-><c- s>&quot;STYLESHEET&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;default.css&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>LINK</c-> <c- e>REL</c-><c- o>=</c-><c- s>&quot;STYLESHEET ALTERNATE&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;big.css&quot;</c-> <c- e>TITLE</c-><c- o>=</c-><c- s>&quot;Big Text&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>SCRIPT</c-> <c- e>SRC</c-><c- o>=</c-><c- s>&quot;support.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>SCRIPT</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>META</c-> <c- e>NAME</c-><c- o>=</c-><c- s>&quot;APPLICATION-NAME&quot;</c-> <c- e>CONTENT</c-><c- o>=</c-><c- s>&quot;Long headed application&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>HEAD</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>BODY</c-><c- p>&gt;</c->
 ...</code></pre>

  </div>

  <p class=note>The <code id=the-head-element:the-title-element-3><a href=#the-title-element>title</a></code> element is a required child in most situations, but when a
  higher-level protocol provides title information, e.g., in the subject line of an email when HTML
  is used as an email authoring format, the <code id=the-head-element:the-title-element-4><a href=#the-title-element>title</a></code> element can be omitted.</p>



  <h4 id=the-title-element><span class=secno>4.2.2</span> The <dfn data-dfn-type=element><code>title</code></dfn> element<a href=#the-title-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title title="The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.">Element/title</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>1+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTitleElement title="The HTMLTitleElement interface is implemented by a document's <title>. This element inherits all of the properties and methods of the HTMLElement interface.">HTMLTitleElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-title-element:concept-element-categories>Categories</a>:<dd><a id=the-title-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dt><a href=dom.html#concept-element-contexts id=the-title-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>In a <code id=the-title-element:the-head-element><a href=#the-head-element>head</a></code> element containing no other <code id=the-title-element:the-title-element><a href=#the-title-element>title</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-title-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-title-element:text-content>Text</a> that is not <a id=the-title-element:inter-element-whitespace href=dom.html#inter-element-whitespace>inter-element whitespace</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-title-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-title-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-title-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-title-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-title>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-title>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-title-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmltitleelement' data-dfn-type='interface'><c- g>HTMLTitleElement</c-></dfn> : <a id='the-title-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-title-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-title-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-title-text' id='the-title-element:dom-title-text'><c- g>text</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-title-element:the-title-element-2><a href=#the-title-element>title</a></code> element <a id=the-title-element:represents href=dom.html#represents>represents</a> the document's title or name. Authors
  should use titles that identify their documents even when they are used out of context, for
  example in a user's history or bookmarks, or in search results. The document's title is often
  different from its first heading, since the first heading does not have to stand alone when taken
  out of context.</p>

  <p>There must be no more than one <code id=the-title-element:the-title-element-3><a href=#the-title-element>title</a></code> element per document.</p>

  <p class=note>If it's reasonable for the <code id=the-title-element:document><a href=dom.html#document>Document</a></code> to have no title, then the
  <code id=the-title-element:the-title-element-4><a href=#the-title-element>title</a></code> element is probably not required. See the <code id=the-title-element:the-head-element-2><a href=#the-head-element>head</a></code> element's content
  model for a description of when the element is required.</p>

  <dl class=domintro><dt><code><var>title</var>.<a href=#dom-title-text id=dom-title-text-dev>text</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a id=the-title-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the element.</p>

    <p>Can be set, to replace the element's children with the given value.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLTitleElement id=dom-title-text data-dfn-type=attribute><code>text</code></dfn>
  attribute's getter must return this <code id=the-title-element:the-title-element-5><a href=#the-title-element>title</a></code> element's <a id=the-title-element:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text
  content</a>.</p>

  <p>The <code id=the-title-element:dom-title-text-2><a href=#dom-title-text>text</a></code> attribute's setter must <a id=the-title-element:string-replace-all href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>string replace
  all</a> with the given value within this <code id=the-title-element:the-title-element-6><a href=#the-title-element>title</a></code> element.</p>

  

  <div class=example>

   <p>Here are some examples of appropriate titles, contrasted with the top-level headings that
   might be used on those same pages.</p>

   <pre><code class='html'>  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Introduction to The Mating Rituals of Bees<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
    ...
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Introduction<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This companion guide to the highly successful
  <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Introduction to Medieval Bee-Keeping<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> book is...</code></pre>

   <p>The next page might be a part of the same site. Note how the title describes the subject
   matter unambiguously, while the first heading assumes the reader knows what the context is and
   therefore won't wonder if the dances are Salsa or Waltz:</p>

   <pre><code class='html'>  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Dances used during bee mating rituals<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
    ...
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->The Dances<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>The string to use as the document's title is given by the <code id=the-title-element:document.title><a href=dom.html#document.title>document.title</a></code> IDL attribute.</p>

  

  <p>User agents should use the document's title when referring to the document in their user
  interface. When the contents of a <code id=the-title-element:the-title-element-7><a href=#the-title-element>title</a></code> element are used in this way, <a id=the-title-element:the-directionality href=dom.html#the-directionality>the
  directionality</a> of that <code id=the-title-element:the-title-element-8><a href=#the-title-element>title</a></code> element should be used to set the directionality
  of the document's title in the user interface.</p>

  


  <h4 id=the-base-element><span class=secno>4.2.3</span> The <dfn data-dfn-type=element><code>base</code></dfn> element<a href=#the-base-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base title="The <base> HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document.">Element/base</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLBaseElement title="The HTMLBaseElement interface contains the base URI for a document. This object inherits all of the properties and methods as described in the HTMLElement interface.">HTMLBaseElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-base-element:concept-element-categories>Categories</a>:<dd><a id=the-base-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dt><a href=dom.html#concept-element-contexts id=the-base-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>In a <code id=the-base-element:the-head-element><a href=#the-head-element>head</a></code> element containing no other <code id=the-base-element:the-base-element><a href=#the-base-element>base</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-base-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-base-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-base-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-base-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-base-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-base-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-base-element:attr-base-href><a href=#attr-base-href>href</a></code> —  <a id=the-base-element:document-base-url href=urls-and-fetching.html#document-base-url>Document base URL</a>
     <dd><code id=the-base-element:attr-base-target><a href=#attr-base-target>target</a></code> —  Default <a id=the-base-element:navigable href=document-sequences.html#navigable>navigable</a> for <a id=the-base-element:hyperlink href=links.html#hyperlink>hyperlink</a> <a href=browsing-the-web.html#navigate id=the-base-element:navigate>navigation</a> and <a id=the-base-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-base-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-base>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-base>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-base-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlbaseelement' data-dfn-type='interface'><c- g>HTMLBaseElement</c-></dfn> : <a id='the-base-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-base-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-base-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-base-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-base-href' id='the-base-element:dom-base-href'><c- g>href</c-></a>;
  [<a id='the-base-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-base-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLBaseElement' id='dom-base-target' data-dfn-type='attribute'><c- g>target</c-></dfn>;
};</code></pre>
   </dl>

  <p>The <code id=the-base-element:the-base-element-2><a href=#the-base-element>base</a></code> element allows authors to specify the <a id=the-base-element:document-base-url-2 href=urls-and-fetching.html#document-base-url>document base URL</a> for
  the purposes of parsing <a href=https://url.spec.whatwg.org/#concept-url id=the-base-element:url data-x-internal=url>URLs</a>, and the name of the default
  <a id=the-base-element:navigable-2 href=document-sequences.html#navigable>navigable</a> for the purposes of <a id=the-base-element:following-hyperlinks-2 href=links.html#following-hyperlinks-2>following hyperlinks</a>. The element does not
  <a href=dom.html#represents id=the-base-element:represents>represent</a> any content beyond this information.</p>

  <p>There must be no more than one <code id=the-base-element:the-base-element-3><a href=#the-base-element>base</a></code> element per document.</p>

  <p>A <code id=the-base-element:the-base-element-4><a href=#the-base-element>base</a></code> element must have either an <code id=the-base-element:attr-base-href-2><a href=#attr-base-href>href</a></code>
  attribute, a <code id=the-base-element:attr-base-target-2><a href=#attr-base-target>target</a></code> attribute, or both.</p>

  <p>The <dfn data-dfn-for=base id=attr-base-href data-dfn-type=element-attr><code>href</code></dfn> content
  attribute, if specified, must contain a <a id=the-base-element:valid-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</a>.</p>

  <p>A <code id=the-base-element:the-base-element-5><a href=#the-base-element>base</a></code> element, if it has an <code id=the-base-element:attr-base-href-3><a href=#attr-base-href>href</a></code> attribute,
  must come before any other elements in the tree that have attributes defined as taking <a href=https://url.spec.whatwg.org/#concept-url id=the-base-element:url-2 data-x-internal=url>URLs</a>.</p>

  

  <p class=note>If there are multiple <code id=the-base-element:the-base-element-6><a href=#the-base-element>base</a></code> elements with <code id=the-base-element:attr-base-href-4><a href=#attr-base-href>href</a></code> attributes, all but the first are ignored.</p>

  

  <p>The <dfn data-dfn-for=base id=attr-base-target data-dfn-type=element-attr><code>target</code></dfn> attribute,
  if specified, must contain a <a id=the-base-element:valid-navigable-target-name-or-keyword href=document-sequences.html#valid-navigable-target-name-or-keyword>valid navigable target name or keyword</a>, which specifies
  which <a id=the-base-element:navigable-3 href=document-sequences.html#navigable>navigable</a> is to be used as the default when <a href=links.html#hyperlink id=the-base-element:hyperlink-2>hyperlinks</a> and <a href=forms.html#the-form-element id=the-base-element:the-form-element>forms</a> in the
  <code id=the-base-element:document><a href=dom.html#document>Document</a></code> cause <a href=browsing-the-web.html#navigate id=the-base-element:navigate-2>navigation</a>.</p>

  <p>A <code id=the-base-element:the-base-element-7><a href=#the-base-element>base</a></code> element, if it has a <code id=the-base-element:attr-base-target-3><a href=#attr-base-target>target</a></code>
  attribute, must come before any elements in the tree that represent <a href=links.html#hyperlink id=the-base-element:hyperlink-3>hyperlinks</a>.</p>

  

  <p class=note>If there are multiple <code id=the-base-element:the-base-element-8><a href=#the-base-element>base</a></code> elements with <code id=the-base-element:attr-base-target-4><a href=#attr-base-target>target</a></code> attributes, all but the first are ignored.</p>

  <p>To <dfn id="get-an-element's-target">get an element's target</dfn>, given an <code id=the-base-element:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=the-base-element:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, or
  <code id=the-base-element:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element <var>element</var>, and an optional string-or-null <var>target</var>
  (default null), run these steps:

  <ol><li>
    <p>If <var>target</var> is null, then:</p>

    <ol><li><p>If <var>element</var> has a <code>target</code> attribute, then set
     <var>target</var> to that attribute's value.<li><p>Otherwise, if <var>element</var>'s <a id=the-base-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> contains a
     <code id=the-base-element:the-base-element-9><a href=#the-base-element>base</a></code> element with a <code id=the-base-element:attr-base-target-5><a href=#attr-base-target>target</a></code> attribute, set
     <var>target</var> to the value of the <code id=the-base-element:attr-base-target-6><a href=#attr-base-target>target</a></code> attribute
     of the first such <code id=the-base-element:the-base-element-10><a href=#the-base-element>base</a></code> element.</ol>
   <li><p>If <var>target</var> is not null, and contains an <a id=the-base-element:ascii-tab-or-newline href=https://infra.spec.whatwg.org/#ascii-tab-or-newline data-x-internal=ascii-tab-or-newline>ASCII tab or newline</a> and a
   U+003C (&lt;), then set <var>target</var> to "<code>_blank</code>".<li><p>Return <var>target</var>.</ol>

  <hr>

  <p>A <code id=the-base-element:the-base-element-11><a href=#the-base-element>base</a></code> element that is the first <code id=the-base-element:the-base-element-12><a href=#the-base-element>base</a></code> element with an <code id=the-base-element:attr-base-href-5><a href=#attr-base-href>href</a></code> content attribute <a id=the-base-element:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> has a
  <dfn id=frozen-base-url>frozen base URL</dfn>. The <a href=#frozen-base-url id=the-base-element:frozen-base-url>frozen base URL</a> must be <a id=the-base-element:immediately href=infrastructure.html#immediately>immediately</a>
  <a href=#set-the-frozen-base-url id=the-base-element:set-the-frozen-base-url>set</a> for an element whenever any of the following
  situations occur:</p>

  <ul><li><p>The <code id=the-base-element:the-base-element-13><a href=#the-base-element>base</a></code> element becomes the first <code id=the-base-element:the-base-element-14><a href=#the-base-element>base</a></code> element in <a id=the-base-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
   order</a> with an <code id=the-base-element:attr-base-href-6><a href=#attr-base-href>href</a></code> content attribute in its
   <code id=the-base-element:document-2><a href=dom.html#document>Document</a></code>.<li><p>The <code id=the-base-element:the-base-element-15><a href=#the-base-element>base</a></code> element is the first <code id=the-base-element:the-base-element-16><a href=#the-base-element>base</a></code> element in <a id=the-base-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
   order</a> with an <code id=the-base-element:attr-base-href-7><a href=#attr-base-href>href</a></code> content attribute in its
   <code id=the-base-element:document-3><a href=dom.html#document>Document</a></code>, and its <code id=the-base-element:attr-base-href-8><a href=#attr-base-href>href</a></code> content attribute is
   changed.</ul>

  <p>To <dfn id=set-the-frozen-base-url data-export="">set the frozen base URL</dfn> for an element <var>element</var>:</p>

  <ol><li><p>Let <var>document</var> be <var>element</var>'s <a id=the-base-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.

   <li><p>Let <var>urlRecord</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-base-element:url-parser data-x-internal=url-parser>parsing</a> the
   value of <var>element</var>'s <code id=the-base-element:attr-base-href-9><a href=#attr-base-href>href</a></code> content attribute with
   <var>document</var>'s <a id=the-base-element:fallback-base-url href=urls-and-fetching.html#fallback-base-url>fallback base URL</a>, and <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="the-base-element:document's-character-encoding" data-x-internal="document's-character-encoding">character encoding</a>. (Thus, the <code id=the-base-element:the-base-element-17><a href=#the-base-element>base</a></code>
   element isn't affected by itself.)<li>
    <p>If any of the following are true:</p>

    <ul><li><p><var>urlRecord</var> is failure;<li><p><var>urlRecord</var>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=the-base-element:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is "<code>data</code>" or "<code>javascript</code>"; or<li><p>running <a id=the-base-element:is-base-allowed-for-document href=https://w3c.github.io/webappsec-csp/#allow-base-for-document data-x-internal=is-base-allowed-for-document>Is base allowed for Document?</a> on <var>urlRecord</var> and
     <var>document</var> returns "<code>Blocked</code>",</ul>

    <p>then set <var>element</var>'s <a href=#frozen-base-url id=the-base-element:frozen-base-url-2>frozen base URL</a> to <var>document</var>'s
    <a id=the-base-element:fallback-base-url-2 href=urls-and-fetching.html#fallback-base-url>fallback base URL</a> and return.</p>
   <li><p>Set <var>element</var>'s <a href=#frozen-base-url id=the-base-element:frozen-base-url-3>frozen base URL</a> to <var>urlRecord</var>.<li><p><a id=the-base-element:respond-to-base-url-changes href=urls-and-fetching.html#respond-to-base-url-changes>Respond to base URL changes</a> given <var>document</var>.</ol>

  <p>The <dfn data-dfn-for=HTMLBaseElement id=dom-base-href data-dfn-type=attribute><code>href</code></dfn> IDL
  attribute, on getting, must return the result of running the following algorithm:
  

  <ol><li><p>Let <var>document</var> be <var>element</var>'s <a id=the-base-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.

   <li><p>Let <var>url</var> be the value of the <code id=the-base-element:attr-base-href-10><a href=#attr-base-href>href</a></code>
   attribute of this element, if it has one, and the empty string otherwise.<li><p>Let <var>urlRecord</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-base-element:url-parser-2 data-x-internal=url-parser>parsing</a>
   <var>url</var> with <var>document</var>'s <a id=the-base-element:fallback-base-url-3 href=urls-and-fetching.html#fallback-base-url>fallback base URL</a>, and
   <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="the-base-element:document's-character-encoding-2" data-x-internal="document's-character-encoding">character encoding</a>.
   (Thus, the <code id=the-base-element:the-base-element-18><a href=#the-base-element>base</a></code> element isn't affected by other <code id=the-base-element:the-base-element-19><a href=#the-base-element>base</a></code> elements or
   itself.)<li><p>If <var>urlRecord</var> is failure, return <var>url</var>.<li><p>Return the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-base-element:concept-url-serializer data-x-internal=concept-url-serializer>serialization</a> of
   <var>urlRecord</var>.</ol>

  

  <div class=example>

   <p>In this example, a <code id=the-base-element:the-base-element-20><a href=#the-base-element>base</a></code> element is used to set the <a id=the-base-element:document-base-url-3 href=urls-and-fetching.html#document-base-url>document base
   URL</a>:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->This is an example for the <c- ni>&amp;lt;</c->base<c- ni>&amp;gt;</c-> element<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>base</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://www.example.com/news/index.html&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Visit the <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;archives.html&quot;</c-><c- p>&gt;</c->archives<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>The link in the above example would be a link to "<code>https://www.example.com/news/archives.html</code>".</p>

  </div>




  <h4 id=the-link-element><span class=secno>4.2.4</span> The <dfn data-dfn-type=element><code>link</code></dfn> element<a href=#the-link-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link title="The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both &quot;favicon&quot; style icons and icons for the home screen and apps on mobile devices) among other things.">Element/link</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement title="The HTMLLinkElement interface represents reference information for external resources and the relationship of those resources to a document and vice versa (corresponds to <link> element; not to be confused with <a>, which is represented by HTMLAnchorElement). This object inherits all of the properties and methods of the HTMLElement interface.">HTMLLinkElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel title="The HTMLLinkElement.rel property reflects the rel attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the <link> element and the current document.">HTMLLinkElement/rel</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/relList title="The HTMLLinkElement.relList read-only property reflects the rel attribute. It is a live DOMTokenList containing the set of link types indicating the relationship between the resource represented by the <link> element and the current document.">HTMLLinkElement/relList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>30+</span></span><span class="safari yes"><span>Safari</span><span>9+</span></span><span class="chrome yes"><span>Chrome</span><span>50+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-link-element:concept-element-categories>Categories</a>:<dd><a id=the-link-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd>If the element is <a href=#allowed-in-the-body id=the-link-element:allowed-in-the-body>allowed in the body</a>: <a id=the-link-element:flow-content-2 href=dom.html#flow-content-2>flow content</a>.<dd>If the element is <a href=#allowed-in-the-body id=the-link-element:allowed-in-the-body-2>allowed in the body</a>: <a id=the-link-element:phrasing-content-2 href=dom.html#phrasing-content-2>phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-link-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-link-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>In a <code id=the-link-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> element that is a child of a <code id=the-link-element:the-head-element><a href=#the-head-element>head</a></code> element.<dd>If the element is <a href=#allowed-in-the-body id=the-link-element:allowed-in-the-body-3>allowed in the body</a>: where <a id=the-link-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-link-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-link-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-link-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-link-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-link-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-link-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-link-element:attr-link-href><a href=#attr-link-href>href</a></code> —  Address of the <a id=the-link-element:hyperlink href=links.html#hyperlink>hyperlink</a>
     <dd><code id=the-link-element:attr-link-crossorigin><a href=#attr-link-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-link-element:attr-link-rel><a href=#attr-link-rel>rel</a></code> —  Relationship between the document containing the <a id=the-link-element:hyperlink-2 href=links.html#hyperlink>hyperlink</a> and the destination resource
     <dd><code id=the-link-element:attr-link-media><a href=#attr-link-media>media</a></code> —  Applicable media
     <dd><code id=the-link-element:attr-link-integrity><a href=#attr-link-integrity>integrity</a></code> —  Integrity metadata used in <cite>Subresource Integrity</cite> checks <a href=references.html#refsSRI>[SRI]</a>
     <dd><code id=the-link-element:attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code> —  Language of the linked resource
     <dd><code id=the-link-element:attr-link-type><a href=#attr-link-type>type</a></code> —  Hint for the type of the referenced resource
     <dd><code id=the-link-element:attr-link-referrerpolicy><a href=#attr-link-referrerpolicy>referrerpolicy</a></code> —  <a id=the-link-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-link-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-link-element:attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> —  Sizes of the icons (for <code id=the-link-element:attr-link-rel-2><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:rel-icon><a href=links.html#rel-icon>icon</a></code>")
     <dd><code id=the-link-element:attr-link-imagesrcset><a href=#attr-link-imagesrcset>imagesrcset</a></code> —  Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for <code id=the-link-element:attr-link-rel-3><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-preload><a href=links.html#link-type-preload>preload</a></code>")
     <dd><code id=the-link-element:attr-link-imagesizes><a href=#attr-link-imagesizes>imagesizes</a></code> —  Image sizes for different page layouts (for <code id=the-link-element:attr-link-rel-4><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-preload-2><a href=links.html#link-type-preload>preload</a></code>")
     <dd><code id=the-link-element:attr-link-as><a href=#attr-link-as>as</a></code> —  <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=the-link-element:concept-potential-destination data-x-internal=concept-potential-destination>Potential destination</a> for a preload request (for <code id=the-link-element:attr-link-rel-5><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-preload-3><a href=links.html#link-type-preload>preload</a></code>" and <code id=the-link-element:attr-link-rel-6><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-modulepreload><a href=links.html#link-type-modulepreload>modulepreload</a></code>")
     <dd><code id=the-link-element:attr-link-blocking><a href=#attr-link-blocking>blocking</a></code> —  Whether the element is <a id=the-link-element:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>
     <dd><code id=the-link-element:attr-link-color><a href=#attr-link-color>color</a></code> —  Color to use when customizing a site's icon (for <code id=the-link-element:attr-link-rel-7><a href=#attr-link-rel>rel</a></code>="<code>mask-icon</code>")
     <dd><code id=the-link-element:attr-link-disabled><a href=#attr-link-disabled>disabled</a></code> —  Whether the link is disabled
     <dd><code id=the-link-element:attr-link-fetchpriority><a href=#attr-link-fetchpriority>fetchpriority</a></code> —  Sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-link-element:concept-request-priority data-x-internal=concept-request-priority>priority</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-link-element:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd>Also, the <code id=the-link-element:attr-link-title><a href=#attr-link-title>title</a></code> attribute <a href=#attr-link-title id=the-link-element:attr-link-title-2>has special semantics</a> on this element:  Title of the link;  <a id=the-link-element:css-style-sheet-set-name href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name data-x-internal=css-style-sheet-set-name>CSS style sheet set name</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-link-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-link>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-link>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-link-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmllinkelement' data-dfn-type='interface'><c- g>HTMLLinkElement</c-></dfn> : <a id='the-link-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-link-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-link-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-link-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-href' data-dfn-type='attribute'><c- g>href</c-></dfn>;
  [<a id='the-link-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c->? <a href='#dom-link-crossorigin' id='the-link-element:dom-link-crossorigin'><c- g>crossOrigin</c-></a>;
  [<a id='the-link-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-rel' data-dfn-type='attribute'><c- g>rel</c-></dfn>;
  [<a id='the-link-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-link-as' id='the-link-element:dom-link-as'><c- g>as</c-></a>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-link-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-2'>Reflect</a>=&quot;<a href='#attr-link-rel' id='the-link-element:attr-link-rel-8'>rel</a>&quot;] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-link-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-rellist' data-dfn-type='attribute'><c- g>relList</c-></dfn>;
  [<a id='the-link-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-media' data-dfn-type='attribute'><c- g>media</c-></dfn>;
  [<a id='the-link-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-integrity' data-dfn-type='attribute'><c- g>integrity</c-></dfn>;
  [<a id='the-link-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-hreflang' data-dfn-type='attribute'><c- g>hreflang</c-></dfn>;
  [<a id='the-link-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-6'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-type' data-dfn-type='attribute'><c- g>type</c-></dfn>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-link-element:dom-domtokenlist-value-2' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-7'><c- g>Reflect</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-link-element:domtokenlist-2' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-sizes' data-dfn-type='attribute'><c- g>sizes</c-></dfn>;
  [<a id='the-link-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-8'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-imagesrcset' data-dfn-type='attribute'><c- g>imageSrcset</c-></dfn>;
  [<a id='the-link-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-9'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-imagesizes' data-dfn-type='attribute'><c- g>imageSizes</c-></dfn>;
  [<a id='the-link-element:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-link-referrerpolicy' id='the-link-element:dom-link-referrerpolicy'><c- g>referrerPolicy</c-></a>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-link-element:dom-domtokenlist-value-3' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-10'><c- g>Reflect</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-link-element:domtokenlist-3' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-blocking' data-dfn-type='attribute'><c- g>blocking</c-></dfn>;
  [<a id='the-link-element:cereactions-12' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-link-element:xattr-reflect-11'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLLinkElement' id='dom-link-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  [<a id='the-link-element:cereactions-13' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-link-fetchpriority' id='the-link-element:dom-link-fetchpriority'><c- g>fetchPriority</c-></a>;

  // <a href='obsolete.html#HTMLLinkElement-partial'>also has obsolete members</a>
};
<a href='#htmllinkelement' id='the-link-element:htmllinkelement'><c- n>HTMLLinkElement</c-></a> <c- b>includes</c-> <a id='the-link-element:linkstyle' href='https://drafts.csswg.org/cssom/#the-linkstyle-interface' data-x-internal='linkstyle'><c- n>LinkStyle</c-></a>;</code></pre>
   </dl>

  <p>The <code id=the-link-element:the-link-element><a href=#the-link-element>link</a></code> element allows authors to link their document to other resources.</p>

  <p>The address of the link(s) is given by the <dfn data-dfn-for=link id=attr-link-href data-dfn-type=element-attr><code>href</code></dfn> attribute. If the <code id=the-link-element:attr-link-href-2><a href=#attr-link-href>href</a></code> attribute is present, then its value must be a <a id=the-link-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid
  non-empty URL potentially surrounded by spaces</a>. One or both of the <code id=the-link-element:attr-link-href-3><a href=#attr-link-href>href</a></code> or <code id=the-link-element:attr-link-imagesrcset-2><a href=#attr-link-imagesrcset>imagesrcset</a></code>
  attributes must be present.</p>

  <p>If both the <code id=the-link-element:attr-link-href-4><a href=#attr-link-href>href</a></code> and <code id=the-link-element:attr-link-imagesrcset-3><a href=#attr-link-imagesrcset>imagesrcset</a></code> attributes are absent, then the element does not
  define a link.</p>

  <p>The types of link indicated (the relationships) are given by the value of the <dfn data-dfn-for=link id=attr-link-rel data-dfn-type=element-attr><code>rel</code></dfn> attribute, which, if present, must have a
  value that is a <a id=the-link-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The <a href=links.html#linkTypes>allowed keywords and their meanings</a> are defined in a later section. If the <code id=the-link-element:attr-link-rel-9><a href=#attr-link-rel>rel</a></code> attribute is absent, has no keywords, or if
  none of the keywords used are allowed according to the definitions in this specification, then the
  element does not create any links.</p>

  

  <p><code id=the-link-element:attr-link-rel-10><a href=#attr-link-rel>rel</a></code>'s
  <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-link-element:concept-supported-tokens data-x-internal=concept-supported-tokens>supported tokens</a> are the keywords defined in
  <a href=links.html#linkTypes>HTML link types</a> which are allowed on <code id=the-link-element:the-link-element-2><a href=#the-link-element>link</a></code> elements, impact
  the processing model, and are supported by the user agent. The possible <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-link-element:concept-supported-tokens-2 data-x-internal=concept-supported-tokens>supported tokens</a> are
  <code id=the-link-element:rel-alternate><a href=links.html#rel-alternate>alternate</a></code>,
  <code id=the-link-element:link-type-dns-prefetch><a href=links.html#link-type-dns-prefetch>dns-prefetch</a></code>,
  <code id=the-link-element:link-type-expect><a href=links.html#link-type-expect>expect</a></code>,
  <code id=the-link-element:rel-icon-2><a href=links.html#rel-icon>icon</a></code>,
  <code id=the-link-element:link-type-manifest><a href=links.html#link-type-manifest>manifest</a></code>,
  <code id=the-link-element:link-type-modulepreload-2><a href=links.html#link-type-modulepreload>modulepreload</a></code>,
  <code id=the-link-element:link-type-next><a href=links.html#link-type-next>next</a></code>,
  <code id=the-link-element:link-type-pingback><a href=links.html#link-type-pingback>pingback</a></code>,
  <code id=the-link-element:link-type-preconnect><a href=links.html#link-type-preconnect>preconnect</a></code>,
  <code id=the-link-element:link-type-prefetch><a href=links.html#link-type-prefetch>prefetch</a></code>,
  <code id=the-link-element:link-type-preload-4><a href=links.html#link-type-preload>preload</a></code>,
  <code id=the-link-element:link-type-search><a href=links.html#link-type-search>search</a></code>, and
  <code id=the-link-element:link-type-stylesheet><a href=links.html#link-type-stylesheet>stylesheet</a></code>.
  <code id=the-link-element:attr-link-rel-11><a href=#attr-link-rel>rel</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-link-element:concept-supported-tokens-3 data-x-internal=concept-supported-tokens>supported
  tokens</a> must only include the tokens from this list that the user agent implements the
  processing model for.</p>

  <p class=note>Theoretically a user agent could support the processing model for the <code id=the-link-element:link-type-canonical><a href=links.html#link-type-canonical>canonical</a></code> keyword — if it were a search engine that executed
  JavaScript. But in practice that's quite unlikely. So in most cases, <code id=the-link-element:link-type-canonical-2><a href=links.html#link-type-canonical>canonical</a></code> ought not be included in <code id=the-link-element:attr-link-rel-12><a href=#attr-link-rel>rel</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-link-element:concept-supported-tokens-4 data-x-internal=concept-supported-tokens>supported
  tokens</a>.</p>

  

  <p>A <code id=the-link-element:the-link-element-3><a href=#the-link-element>link</a></code> element must have either a <code id=the-link-element:attr-link-rel-13><a href=#attr-link-rel>rel</a></code>
  attribute or an <code id=the-link-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute, but not both.</p>

  <p>If a <code id=the-link-element:the-link-element-4><a href=#the-link-element>link</a></code> element has an <code id=the-link-element:names:-the-itemprop-attribute-2><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute,
  or has a <code id=the-link-element:attr-link-rel-14><a href=#attr-link-rel>rel</a></code> attribute that contains only keywords that are
  <a id=the-link-element:body-ok href=links.html#body-ok>body-ok</a>, then the element is said to be <dfn id=allowed-in-the-body>allowed in the body</dfn>. This means
  that the element can be used where <a id=the-link-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>phrasing content</a> is expected.</p>

  <p class=note>If the <code id=the-link-element:attr-link-rel-15><a href=#attr-link-rel>rel</a></code> attribute is used, the element can
  only sometimes be used in the <code id=the-link-element:the-body-element><a href=sections.html#the-body-element>body</a></code> of the page. When used with the <code id=the-link-element:names:-the-itemprop-attribute-3><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute, the element can be used both in the
  <code id=the-link-element:the-head-element-2><a href=#the-head-element>head</a></code> element and in the <code id=the-link-element:the-body-element-2><a href=sections.html#the-body-element>body</a></code> of the page, subject to the constraints of
  the microdata model.</p>

  <hr>

  <p>Two categories of links can be created using the <code id=the-link-element:the-link-element-5><a href=#the-link-element>link</a></code> element: <a href=links.html#external-resource-link id=the-link-element:external-resource-link>links to external resources</a> and <a href=links.html#hyperlink id=the-link-element:hyperlink-3>hyperlinks</a>. The <a href=links.html#linkTypes>link types section</a> defines
  whether a particular link type is an external resource or a hyperlink. One <code id=the-link-element:the-link-element-6><a href=#the-link-element>link</a></code>
  element can create multiple links (of which some might be <a href=links.html#external-resource-link id=the-link-element:external-resource-link-2>external resource links</a> and some might be <a href=links.html#hyperlink id=the-link-element:hyperlink-4>hyperlinks</a>); exactly which and how many links are created depends on the
  keywords given in the <code id=the-link-element:attr-link-rel-16><a href=#attr-link-rel>rel</a></code> attribute. User agents must process
  the links on a per-link basis, not a per-element basis.</p>

  <p class=note>Each link created for a <code id=the-link-element:the-link-element-7><a href=#the-link-element>link</a></code> element is handled separately. For
  instance, if there are two <code id=the-link-element:the-link-element-8><a href=#the-link-element>link</a></code> elements with <code>rel="stylesheet"</code>,
  they each count as a separate external resource, and each is affected by its own attributes
  independently. Similarly, if a single <code id=the-link-element:the-link-element-9><a href=#the-link-element>link</a></code> element has a <code id=the-link-element:attr-link-rel-17><a href=#attr-link-rel>rel</a></code> attribute with the value <code>next stylesheet</code>,
  it creates both a <a id=the-link-element:hyperlink-5 href=links.html#hyperlink>hyperlink</a> (for the <code id=the-link-element:link-type-next-2><a href=links.html#link-type-next>next</a></code> keyword) and
  an <a id=the-link-element:external-resource-link-3 href=links.html#external-resource-link>external resource link</a> (for the <code id=the-link-element:link-type-stylesheet-2><a href=links.html#link-type-stylesheet>stylesheet</a></code>
  keyword), and they are affected by other attributes (such as <code id=the-link-element:attr-link-media-2><a href=#attr-link-media>media</a></code> or <code id=the-link-element:attr-link-title-3><a href=#attr-link-title>title</a></code>)
  differently.</p>

  <div class=example>
   <p>For example, the following <code id=the-link-element:the-link-element-10><a href=#the-link-element>link</a></code> element creates two <a href=links.html#hyperlink id=the-link-element:hyperlink-6>hyperlinks</a> (to the same page):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;author license&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/about&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>The two links created by this element are one whose semantic is that the target page has
   information about the current page's author, and one whose semantic is that the target page has
   information regarding the license under which the current page is provided.</p>
  </div>

  <p><a href=links.html#hyperlink id=the-link-element:hyperlink-7>Hyperlinks</a> created with the <code id=the-link-element:the-link-element-11><a href=#the-link-element>link</a></code> element and its
  <code id=the-link-element:attr-link-rel-18><a href=#attr-link-rel>rel</a></code> attribute apply to the whole document. This contrasts with
  the <code id=the-link-element:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code> attribute of <code id=the-link-element:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=the-link-element:the-area-element><a href=image-maps.html#the-area-element>area</a></code>
  elements, which indicates the type of a link whose context is given by the link's location within
  the document.</p>

  <p>Unlike those created by <code id=the-link-element:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=the-link-element:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements, <a href=links.html#hyperlink id=the-link-element:hyperlink-8>hyperlinks</a> created by <code id=the-link-element:the-link-element-12><a href=#the-link-element>link</a></code> elements are not displayed as
  part of the document by default, in user agents that <a href=infrastructure.html#renderingUA>support the suggested
  default rendering</a>. And even if they are force-displayed using CSS, they have no
  <a id=the-link-element:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a>. Instead, they primarily provide semantic information which might
  be used by the page or by other software that consumes the page's contents. Additionally, the user
  agent can <a href=#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element>provide
  its own UI for following such hyperlinks</a>.</p>

  <p>The exact behavior for <a href=links.html#external-resource-link id=the-link-element:external-resource-link-4>links to external resources</a>
  depends on the exact relationship, as defined for the relevant <a href=links.html#linkTypes>link
  type</a>.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn>
  attribute is a <a id=the-link-element:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a>. It is intended for use with <a href=links.html#external-resource-link id=the-link-element:external-resource-link-5>external resource links</a>.</p>

  <p>The <dfn data-dfn-for=link id=attr-link-media data-dfn-type=element-attr><code>media</code></dfn> attribute
  says which media the resource applies to. The value must be a <a id=the-link-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query
  list</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity title="Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.">Subresource_Integrity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>43+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>45+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=link id=attr-link-integrity data-dfn-type=element-attr><code>integrity</code></dfn>
  attribute represents the <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=the-link-element:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity
  metadata</a> for requests which this element is responsible for. The value is text. The
  attribute must only be specified on <code id=the-link-element:the-link-element-13><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-19><a href=#attr-link-rel>rel</a></code> attribute that contains the <code id=the-link-element:link-type-stylesheet-3><a href=links.html#link-type-stylesheet>stylesheet</a></code>, <code id=the-link-element:link-type-preload-5><a href=links.html#link-type-preload>preload</a></code>, or <code id=the-link-element:link-type-modulepreload-3><a href=links.html#link-type-modulepreload>modulepreload</a></code> keyword. <a href=references.html#refsSRI>[SRI]</a></p>

  <p>The <dfn data-dfn-for=link id=attr-link-hreflang data-dfn-type=element-attr><code>hreflang</code></dfn>
  attribute on the <code id=the-link-element:the-link-element-14><a href=#the-link-element>link</a></code> element has the same semantics as the <a href=links.html#attr-hyperlink-hreflang id=the-link-element:attr-hyperlink-hreflang><code>hreflang</code> attribute on the <code>a</code>
  element</a>.</p>

  <p>The <dfn data-dfn-for=link id=attr-link-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  gives the <a id=the-link-element:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> of the linked resource. It is purely advisory. The value must be
  a <a id=the-link-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a>.</p>

  <p>For <a href=links.html#external-resource-link id=the-link-element:external-resource-link-6>external resource links</a>, the <code id=the-link-element:attr-link-type-2><a href=#attr-link-type>type</a></code> attribute is used as a hint to user agents so that they can
  avoid fetching resources they do not support.</p>

  <p>The <dfn data-dfn-for=link id=attr-link-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a <a id=the-link-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer policy
  attribute</a>. It is intended for use with <a href=links.html#external-resource-link id=the-link-element:external-resource-link-7>external
  resource links</a>, where it helps set the <a id=the-link-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> used when <a href=#fetch-and-process-the-linked-resource id=the-link-element:fetch-and-process-the-linked-resource>fetching and processing the linked resource</a>.
  <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <p>The <dfn data-dfn-for=link id=attr-link-title data-dfn-type=element-attr><code>title</code></dfn> attribute
  gives the title of the link. With one exception, it is purely advisory. The value is text. The
  exception is for style sheet links that are <a id=the-link-element:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, for which the <code id=the-link-element:attr-link-title-4><a href=#attr-link-title>title</a></code> attribute defines <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set id=the-link-element:css-style-sheet-set data-x-internal=css-style-sheet-set>CSS
  style sheet sets</a>.</p>

  <p class=note>The <code id=the-link-element:attr-link-title-5><a href=#attr-link-title>title</a></code> attribute on <code id=the-link-element:the-link-element-15><a href=#the-link-element>link</a></code>
  elements differs from the global <code id=the-link-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute of most other
  elements in that a link without a title does not inherit the title of the parent element: it
  merely has no title.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-imagesrcset data-dfn-type=element-attr><code>imagesrcset</code></dfn>
  attribute may be present, and is a <a id=the-link-element:srcset-attribute href=images.html#srcset-attribute>srcset attribute</a>.</p>

  <p>The <code id=the-link-element:attr-link-imagesrcset-4><a href=#attr-link-imagesrcset>imagesrcset</a></code> and <code id=the-link-element:attr-link-href-5><a href=#attr-link-href>href</a></code> attributes (if <a href=images.html#width-descriptor id=the-link-element:width-descriptor>width
  descriptors</a> are not used) together contribute the <a href=images.html#image-source id=the-link-element:image-source>image
  sources</a> to the <a id=the-link-element:source-set href=images.html#source-set>source set</a>.</p>

  <p>If the <code id=the-link-element:attr-link-imagesrcset-5><a href=#attr-link-imagesrcset>imagesrcset</a></code> attribute is present and has any
  <a href=images.html#image-candidate-string id=the-link-element:image-candidate-string>image candidate strings</a> using a <a id=the-link-element:width-descriptor-2 href=images.html#width-descriptor>width
  descriptor</a>, the <dfn data-dfn-for=link id=attr-link-imagesizes data-dfn-type=element-attr><code>imagesizes</code></dfn> attribute must also be present, and is a
  <a id=the-link-element:sizes-attribute href=images.html#sizes-attribute>sizes attribute</a>. The <code id=the-link-element:attr-link-imagesizes-2><a href=#attr-link-imagesizes>imagesizes</a></code> attribute
  contributes the <a id=the-link-element:source-size-2 href=images.html#source-size-2>source size</a> to the <a id=the-link-element:source-set-2 href=images.html#source-set>source set</a>.</p>

  <p>The <code id=the-link-element:attr-link-imagesrcset-6><a href=#attr-link-imagesrcset>imagesrcset</a></code> and <code id=the-link-element:attr-link-imagesizes-3><a href=#attr-link-imagesizes>imagesizes</a></code> attributes must only be specified on
  <code id=the-link-element:the-link-element-16><a href=#the-link-element>link</a></code> elements that have both a <code id=the-link-element:attr-link-rel-20><a href=#attr-link-rel>rel</a></code> attribute that
  specifies the <code id=the-link-element:link-type-preload-6><a href=links.html#link-type-preload>preload</a></code> keyword, as well as an <code id=the-link-element:attr-link-as-2><a href=#attr-link-as>as</a></code> attribute in the "<code>image</code>" state.</p>

  <div class=example>
   <p>These attributes allow preloading the appropriate resource that is later used by an
   <code id=the-link-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element that has the corresponding values for its <code id=the-link-element:attr-img-srcset><a href=embedded-content.html#attr-img-srcset>srcset</a></code> and <code id=the-link-element:attr-img-sizes><a href=embedded-content.html#attr-img-sizes>sizes</a></code>
   attributes:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;preload&quot;</c-> <c- e>as</c-><c- o>=</c-><c- s>&quot;image&quot;</c->
      <c- e>imagesrcset</c-><c- o>=</c-><c- s>&quot;wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w&quot;</c->
      <c- e>imagesizes</c-><c- o>=</c-><c- s>&quot;50vw&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- ... later, or perhaps inserted dynamically ... --&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;wolf.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;A rad wolf&quot;</c->
     <c- e>srcset</c-><c- o>=</c-><c- s>&quot;wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w&quot;</c->
     <c- e>sizes</c-><c- o>=</c-><c- s>&quot;50vw&quot;</c-><c- p>&gt;</c-></code></pre>

     <p>Note how we omit the <code id=the-link-element:attr-link-href-6><a href=#attr-link-href>href</a></code> attribute, as it would only
     be relevant for browsers that do not support <code id=the-link-element:attr-link-imagesrcset-7><a href=#attr-link-imagesrcset>imagesrcset</a></code>, and in those cases it would likely cause the
     incorrect image to be preloaded.</p>
  </div>

  <div class=example>
   <p>The <code id=the-link-element:attr-link-imagesrcset-8><a href=#attr-link-imagesrcset>imagesrcset</a></code> attribute can be combined with the
   <code id=the-link-element:attr-link-media-3><a href=#attr-link-media>media</a></code> attribute to preload the appropriate resource
   selected from a <code id=the-link-element:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code> element's sources, for <a id=the-link-element:art-direction href=images.html#art-direction>art direction</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;preload&quot;</c-> <c- e>as</c-><c- o>=</c-><c- s>&quot;image&quot;</c->
      <c- e>imagesrcset</c-><c- o>=</c-><c- s>&quot;dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x&quot;</c->
      <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 800px)&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;preload&quot;</c-> <c- e>as</c-><c- o>=</c-><c- s>&quot;image&quot;</c->
      <c- e>imagesrcset</c-><c- o>=</c-><c- s>&quot;dog-wide-1x.jpg, dog-wide-2x.jpg 2x&quot;</c->
      <c- e>media</c-><c- o>=</c-><c- s>&quot;(min-width: 801px)&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- ... later, or perhaps inserted dynamically ... --&gt;</c->
<c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x&quot;</c->
          <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 800px)&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;dog-wide-1x.jpg&quot;</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;dog-wide-2x.jpg 2x&quot;</c->
       <c- e>alt</c-><c- o>=</c-><c- s>&quot;An awesome dog&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>
  </div>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-sizes data-dfn-type=element-attr><code>sizes</code></dfn> attribute
  gives the sizes of icons for visual media. Its value, if present, is merely advisory. User agents may use the value to decide which icon(s) to use if multiple icons are
  available. If specified, the attribute must have a value that is an <a id=the-link-element:unordered-set-of-unique-space-separated-tokens-2 href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of
  unique space-separated tokens</a> which are <a id=the-link-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>. Each value
  must be either an <a id=the-link-element:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=the-link-element:attr-link-sizes-any><a href=links.html#attr-link-sizes-any>any</a></code>", or a value that consists of two <a href=common-microsyntaxes.html#valid-non-negative-integer id=the-link-element:valid-non-negative-integer>valid non-negative integers</a> that do not have a leading U+0030 DIGIT
  ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN
  CAPITAL LETTER X character. The attribute must only be specified on <code id=the-link-element:the-link-element-17><a href=#the-link-element>link</a></code> elements
  that have a <code id=the-link-element:attr-link-rel-21><a href=#attr-link-rel>rel</a></code> attribute that specifies the <code id=the-link-element:rel-icon-3><a href=links.html#rel-icon>icon</a></code> keyword or the <code>apple-touch-icon</code> keyword.</p>

  <p class=note>The <code>apple-touch-icon</code> keyword is a registered <a href=links.html#concept-rel-extensions id=the-link-element:concept-rel-extensions>extension to the predefined set of link types</a>, but user
  agents are not required to support it in any way.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-as data-dfn-type=element-attr><code>as</code></dfn> attribute
  specifies the <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=the-link-element:concept-potential-destination-2 data-x-internal=concept-potential-destination>potential destination</a> for a
  preload request for the resource given by the <code id=the-link-element:attr-link-href-7><a href=#attr-link-href>href</a></code> attribute.
  It is an <a id=the-link-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a>. Each <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=the-link-element:concept-potential-destination-3 data-x-internal=concept-potential-destination>potential destination</a> is a keyword for this
  attribute, mapping to a state of the same name. The attribute must be specified on
  <code id=the-link-element:the-link-element-18><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-22><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code id=the-link-element:link-type-preload-7><a href=links.html#link-type-preload>preload</a></code> keyword. It may be specified on
  <code id=the-link-element:the-link-element-19><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-23><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code id=the-link-element:link-type-modulepreload-4><a href=links.html#link-type-modulepreload>modulepreload</a></code> keyword; in such cases it must
  have a value which is a <a href=https://fetch.spec.whatwg.org/#request-destination-script-like id=the-link-element:concept-script-like-destination data-x-internal=concept-script-like-destination>script-like
  destination</a>. For other <code id=the-link-element:the-link-element-20><a href=#the-link-element>link</a></code> elements, it must not be specified.</p>

  <p>The processing model for how the <code id=the-link-element:attr-link-as-3><a href=#attr-link-as>as</a></code> attribute is
  used is given in an individual link type's <a href=#fetch-and-process-the-linked-resource id=the-link-element:fetch-and-process-the-linked-resource-2>fetch and process the linked resource</a>
  algorithm.</p>

  <p class=note>The attribute does not have a <i id=the-link-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value
  default</a></i> or <i id=the-link-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i>, meaning that invalid
  or missing values for the attribute map to no state. This is accounted for in the processing
  model. For <code id=the-link-element:link-type-preload-8><a href=links.html#link-type-preload>preload</a></code> links, both conditions are an error; for
  <code id=the-link-element:link-type-modulepreload-5><a href=links.html#link-type-modulepreload>modulepreload</a></code> links, a missing value will be treated as
  "<code>script</code>".</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-blocking data-dfn-type=element-attr><code>blocking</code></dfn>
  attribute is a <a id=the-link-element:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>. It is used by link types <code id=the-link-element:link-type-stylesheet-4><a href=links.html#link-type-stylesheet>stylesheet</a></code> and <code id=the-link-element:link-type-expect-2><a href=links.html#link-type-expect>expect</a></code>, and it must only be specified on link elements
  that have a <code id=the-link-element:attr-link-rel-24><a href=#attr-link-rel>rel</a></code> attribute containing those keywords.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-color data-dfn-type=element-attr><code>color</code></dfn> attribute is
  used with the <code>mask-icon</code> link type. The attribute must only be specified on
  <code id=the-link-element:the-link-element-21><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-25><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code>mask-icon</code> keyword. The value must be a string that matches the
  CSS <a id=the-link-element:color href=https://drafts.csswg.org/css-color/#typedef-color data-x-internal=color>&lt;color></a> production, defining a suggested color that user agents can use to
  customize the display of the icon that the user sees when they pin your site.</p>

  <p class=note>This specification does not have any user agent requirements for the <code id=the-link-element:attr-link-color-2><a href=#attr-link-color>color</a></code> attribute.</p>

  <p class=note>The <code>mask-icon</code> keyword is a registered <a href=links.html#concept-rel-extensions id=the-link-element:concept-rel-extensions-2>extension to the predefined set of link types</a>, but user
  agents are not required to support it in any way.</p>

  <hr>

  <p><code id=the-link-element:the-link-element-22><a href=#the-link-element>link</a></code> elements have an associated <dfn id=explicitly-enabled>explicitly enabled</dfn> boolean. It is
  initially false.

  <p>The <dfn data-dfn-for=link id=attr-link-disabled data-dfn-type=element-attr><code>disabled</code></dfn>
  attribute is a <a id=the-link-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that is used with the <code id=the-link-element:link-type-stylesheet-5><a href=links.html#link-type-stylesheet>stylesheet</a></code> link type.  The attribute must only be specified on
  <code id=the-link-element:the-link-element-23><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-26><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code id=the-link-element:link-type-stylesheet-6><a href=links.html#link-type-stylesheet>stylesheet</a></code> keyword.</p>

  <p>Whenever the <code id=the-link-element:attr-link-disabled-2><a href=#attr-link-disabled>disabled</a></code> attribute is removed, set the
  <code id=the-link-element:the-link-element-24><a href=#the-link-element>link</a></code> element's <a href=#explicitly-enabled id=the-link-element:explicitly-enabled>explicitly enabled</a> attribute to true.</p>

  <div class=example>
   <p>Removing the <code id=the-link-element:attr-link-disabled-3><a href=#attr-link-disabled>disabled</a></code> attribute dynamically, e.g.,
   using <code>document.querySelector("link").removeAttribute("disabled")</code>, will
   fetch and apply the style sheet:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>disabled</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;css/pooh&quot;</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/fetchPriority title="The fetchPriority property of the HTMLLinkElement interface represents a hint given to the browser on how it should prioritize the preload of the given resource relative to other resources of the same type.">HTMLLinkElement/fetchPriority</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span title="Requires setting a user preference or runtime flag.">🔰 preview+</span></span><span class="chrome yes"><span>Chrome</span><span>102+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>102+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=link id=attr-link-fetchpriority data-dfn-type=element-attr><code>fetchpriority</code></dfn> attribute is a <a id=the-link-element:fetch-priority-attribute href=urls-and-fetching.html#fetch-priority-attribute>fetch
  priority attribute</a> that is intended for use with <a href=links.html#external-resource-link id=the-link-element:external-resource-link-8>external resource links</a>, where it is used to set the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-link-element:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> used when <a href=#fetch-and-process-the-linked-resource id=the-link-element:fetch-and-process-the-linked-resource-3>fetching and processing the linked
  resource</a>.</p>

  
  <hr>

  <p class=note>There is no reflecting IDL attribute for the <code id=the-link-element:attr-link-color-3><a href=#attr-link-color>color</a></code> attribute, but this might be added later.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/as title="The as property of the HTMLLinkElement interface returns a string representing the type of content to be preloaded by a link element.">HTMLLinkElement/as</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>50+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLLinkElement id=dom-link-as data-dfn-type=attribute><code>as</code></dfn> IDL
  attribute must <a id=the-link-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-link-element:attr-link-as-4><a href=#attr-link-as>as</a></code> content attribute,
  <a id=the-link-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn data-dfn-for=HTMLLinkElement id=dom-link-crossorigin data-dfn-type=attribute><code>crossOrigin</code></dfn> IDL attribute must <a id=the-link-element:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the
  <code id=the-link-element:attr-link-crossorigin-2><a href=#attr-link-crossorigin>crossorigin</a></code> content attribute, <a id=the-link-element:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only
  known values</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/referrerPolicy title="The HTMLLinkElement.referrerPolicy property reflects the HTML referrerpolicy attribute of the <link> element defining which referrer is sent when fetching the resource.">HTMLLinkElement/referrerPolicy</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>58+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLLinkElement id=dom-link-referrerpolicy data-dfn-type=attribute><code>referrerPolicy</code></dfn> IDL attribute must
  <a id=the-link-element:reflect-3 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-link-element:attr-link-referrerpolicy-2><a href=#attr-link-referrerpolicy>referrerpolicy</a></code> content
  attribute, <a id=the-link-element:limited-to-only-known-values-3 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn data-dfn-for=HTMLLinkElement id=dom-link-fetchpriority data-dfn-type=attribute><code>fetchPriority</code></dfn> IDL attribute must
  <a id=the-link-element:reflect-4 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-link-element:attr-link-fetchpriority-2><a href=#attr-link-fetchpriority>fetchpriority</a></code> content
  attribute, <a id=the-link-element:limited-to-only-known-values-4 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p class=note>The <code id=the-link-element:dom-link-rellist><a href=#dom-link-rellist>relList</a></code> attribute can be used for
  feature detection, by calling its <code id=the-link-element:dom-domtokenlist-supports><a data-x-internal=dom-domtokenlist-supports href=https://dom.spec.whatwg.org/#dom-domtokenlist-supports>supports()</a></code>
  method to check which <a href=links.html#linkTypes>types of links</a> are supported.</p>

  <h5 id=processing-the-media-attribute><span class=secno>4.2.4.1</span> Processing the <code id=processing-the-media-attribute:attr-link-media><a href=#attr-link-media>media</a></code> attribute<a href=#processing-the-media-attribute class=self-link></a></h5>

  <p>If the link is a <a id=processing-the-media-attribute:hyperlink href=links.html#hyperlink>hyperlink</a> then the <code id=processing-the-media-attribute:attr-link-media-2><a href=#attr-link-media>media</a></code>
  attribute is purely advisory, and describes for which media the document in question was
  designed.</p>

  <p>However, if the link is an <a id=processing-the-media-attribute:external-resource-link href=links.html#external-resource-link>external resource link</a>, then the <code id=processing-the-media-attribute:attr-link-media-3><a href=#attr-link-media>media</a></code> attribute is prescriptive. The user agent must apply the
  external resource when the <code id=processing-the-media-attribute:attr-link-media-4><a href=#attr-link-media>media</a></code> attribute's value
  <a id=processing-the-media-attribute:matches-the-environment href=common-microsyntaxes.html#matches-the-environment>matches the environment</a> and the other relevant conditions apply, and must not apply
  it otherwise.</p>

  <p id=default-media>The default, if the <code id=processing-the-media-attribute:attr-link-media-5><a href=#attr-link-media>media</a></code> attribute is
  omitted, is "<code>all</code>", meaning that by default links apply to all media.</p>

  <p class=note>The external resource might have further restrictions defined within that limit
  its applicability. For example, a CSS style sheet might have some <code>@media</code>
  blocks. This specification does not override such further restrictions or requirements.</p>

  <h5 id=processing-the-type-attribute><span class=secno>4.2.4.2</span> Processing the <code id=processing-the-type-attribute:attr-link-type><a href=#attr-link-type>type</a></code> attribute<a href=#processing-the-type-attribute class=self-link></a></h5>

  <p>If the <code id=processing-the-type-attribute:attr-link-type-2><a href=#attr-link-type>type</a></code> attribute is present, then the user agent must
  assume that the resource is of the given type (even if that is not a <a id=processing-the-type-attribute:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type
  string</a>, e.g. the empty string). If the attribute is omitted, but the <a id=processing-the-type-attribute:external-resource-link href=links.html#external-resource-link>external
  resource link</a> type has a default type defined, then the user agent must assume that the
  resource is of that type. If the UA does not support the given <a id=processing-the-type-attribute:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> for the
  given link relationship, then the UA should not <a href=#fetch-and-process-the-linked-resource id=processing-the-type-attribute:fetch-and-process-the-linked-resource>fetch and process the linked
  resource</a>; if the UA does support the given <a id=processing-the-type-attribute:mime-type-2 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> for the given link
  relationship, then the UA should <a href=#fetch-and-process-the-linked-resource id=processing-the-type-attribute:fetch-and-process-the-linked-resource-2>fetch and process the linked resource</a> at the
  appropriate time as specified for the <a id=processing-the-type-attribute:external-resource-link-2 href=links.html#external-resource-link>external resource link</a>'s particular type.
  If the attribute is omitted, and the <a id=processing-the-type-attribute:external-resource-link-3 href=links.html#external-resource-link>external resource link</a> type does not have a
  default type defined, but the user agent would <a href=#fetch-and-process-the-linked-resource id=processing-the-type-attribute:fetch-and-process-the-linked-resource-3>fetch and process the linked resource</a>
  if the type was known and supported, then the user agent should <a href=#fetch-and-process-the-linked-resource id=processing-the-type-attribute:fetch-and-process-the-linked-resource-4>fetch and process the linked
  resource</a> under the assumption that it will be supported.</p>

  <p>User agents must not consider the <code id=processing-the-type-attribute:attr-link-type-3><a href=#attr-link-type>type</a></code> attribute
  authoritative — upon fetching the resource, user agents must not use the <code id=processing-the-type-attribute:attr-link-type-4><a href=#attr-link-type>type</a></code> attribute to determine its actual type. Only the actual type
  (as defined in the next paragraph) is used to determine whether to <em>apply</em> the resource,
  not the aforementioned assumed type.</p>

  <p id=concept-link-type-sniffing>If the <a id=processing-the-type-attribute:external-resource-link-4 href=links.html#external-resource-link>external resource link</a> type defines rules
  for processing the resource's <a href=urls-and-fetching.html#content-type id=processing-the-type-attribute:content-type>Content-Type metadata</a>, then those
  rules apply.  Otherwise, if the resource is expected to be an image, user agents may apply the
  <a href=https://mimesniff.spec.whatwg.org/#rules-for-sniffing-images-specifically id=processing-the-type-attribute:content-type-sniffing:-image data-x-internal=content-type-sniffing:-image>image sniffing rules</a>, with the <var>official
  type</var> being the type determined from the resource's <a href=urls-and-fetching.html#content-type id=processing-the-type-attribute:content-type-2>Content-Type
  metadata</a>, and use the resulting <a href=https://mimesniff.spec.whatwg.org/#computed-mime-type id=processing-the-type-attribute:content-type-sniffing-2 data-x-internal=content-type-sniffing-2>computed type of the
  resource</a> as if it was the actual type.  Otherwise, if neither of these conditions apply or
  if the user agent opts not to apply the image sniffing rules, then the user agent must use the
  resource's <a href=urls-and-fetching.html#content-type id=processing-the-type-attribute:content-type-3>Content-Type metadata</a> to determine the type of the
  resource. If there is no type metadata, but the <a id=processing-the-type-attribute:external-resource-link-5 href=links.html#external-resource-link>external resource link</a> type has a
  default type defined, then the user agent must assume that the resource is of that type.</p>

  <p class=note>The <code id=processing-the-type-attribute:link-type-stylesheet><a href=links.html#link-type-stylesheet>stylesheet</a></code> link type defines rules for
  processing the resource's <a href=urls-and-fetching.html#content-type id=processing-the-type-attribute:content-type-4>Content-Type metadata</a>.</p>

  <p>Once the user agent has established the type of the resource, the user agent must apply the
  resource if it is of a supported type and the other relevant conditions apply, and must ignore the
  resource otherwise.</p>

  <div class=example>

   <p>If a document contains style sheet links labeled as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;A&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text/plain&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;B&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text/css&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;C&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>...then a compliant UA that supported only CSS style sheets would fetch the B and C files, and
   skip the A file (since <code id=processing-the-type-attribute:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code> is not the <a id=processing-the-type-attribute:mime-type-3 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> for CSS style
   sheets).</p>

   <p>For files B and C, it would then check the actual types returned by the server. For those that
   are sent as <code id=processing-the-type-attribute:text/css><a href=indices.html#text/css>text/css</a></code>, it would apply the styles, but for those labeled as
   <code id=processing-the-type-attribute:text/plain-2><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code>, or any other type, it would not.</p>

   <p>If one of the two files was returned without a <a id=processing-the-type-attribute:content-type-5 href=urls-and-fetching.html#content-type>Content-Type</a> metadata, or with a
   syntactically incorrect type like <code>Content-Type: "null"</code>, then the
   default type for <code id=processing-the-type-attribute:link-type-stylesheet-2><a href=links.html#link-type-stylesheet>stylesheet</a></code> links would kick in. Since that
   default type is <code id=processing-the-type-attribute:text/css-2><a href=indices.html#text/css>text/css</a></code>, the style sheet <em>would</em> nonetheless be applied.</p>

  </div>

  <h5 id=fetching-and-processing-a-resource-from-a-link-element><span class=secno>4.2.4.3</span> <span id=obtaining-a-resource-from-a-link-element></span>Fetching and processing a resource
  from a <code id=fetching-and-processing-a-resource-from-a-link-element:the-link-element><a href=#the-link-element>link</a></code> element<a href=#fetching-and-processing-a-resource-from-a-link-element class=self-link></a></h5>

  <p id=concept-link-obtain>All <a href=links.html#external-resource-link id=fetching-and-processing-a-resource-from-a-link-element:external-resource-link>external resource
  links</a> have a <dfn id=fetch-and-process-the-linked-resource>fetch and process the linked resource</dfn> algorithm, which takes a
  <code id=fetching-and-processing-a-resource-from-a-link-element:the-link-element-2><a href=#the-link-element>link</a></code> element <var>el</var>. They also have <dfn id=linked-resource-fetch-setup-steps>linked resource fetch setup
  steps</dfn> which take a <code id=fetching-and-processing-a-resource-from-a-link-element:the-link-element-3><a href=#the-link-element>link</a></code> element <var>el</var> and <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-and-processing-a-resource-from-a-link-element:concept-request data-x-internal=concept-request>request</a> <var>request</var>. Individual link types may provide
  their own <a href=#fetch-and-process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:fetch-and-process-the-linked-resource>fetch and process the linked resource</a> algorithm, but unless explicitly
  stated, they use the <a href=#default-fetch-and-process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:default-fetch-and-process-the-linked-resource>default fetch and process the linked resource</a> algorithm.
  Similarly, individual link types may provide their own <a href=#linked-resource-fetch-setup-steps id=fetching-and-processing-a-resource-from-a-link-element:linked-resource-fetch-setup-steps>linked resource fetch setup
  steps</a>, but unless explicitly stated, these steps just return true.</p>

  <p>The <dfn id=default-fetch-and-process-the-linked-resource>default fetch and process the linked resource</dfn>, given a <code id=fetching-and-processing-a-resource-from-a-link-element:the-link-element-4><a href=#the-link-element>link</a></code> element
  <var>el</var>, is as follows:</p>

  <ol><li><p>Let <var>options</var> be the result of <a href=#create-link-options-from-element id=fetching-and-processing-a-resource-from-a-link-element:create-link-options-from-element>creating link options</a> from <var>el</var>.<li><p>Let <var>request</var> be the result of <a href=#create-a-link-request id=fetching-and-processing-a-resource-from-a-link-element:create-a-link-request>creating a
   link request</a> given <var>options</var>.<li><p>If <var>request</var> is null, then return.<li><p>Set <var>request</var>'s <a id=fetching-and-processing-a-resource-from-a-link-element:synchronous-flag href=https://fetch.spec.whatwg.org/#synchronous-flag data-x-internal=synchronous-flag>synchronous flag</a>.<li><p>Run the <a href=#linked-resource-fetch-setup-steps id=fetching-and-processing-a-resource-from-a-link-element:linked-resource-fetch-setup-steps-2>linked resource fetch setup steps</a>, given <var>el</var> and
   <var>request</var>. If the result is false, then return.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-and-processing-a-resource-from-a-link-element:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator
   type</a> to "<code>css</code>" if <var>el</var>'s <code id=fetching-and-processing-a-resource-from-a-link-element:attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute contains the keyword <code id=fetching-and-processing-a-resource-from-a-link-element:link-type-stylesheet><a href=links.html#link-type-stylesheet>stylesheet</a></code>; "<code>link</code>" otherwise.<li>
    <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-and-processing-a-resource-from-a-link-element:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var> with <i id=fetching-and-processing-a-resource-from-a-link-element:processresponseconsumebody><a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a></i> set to the following steps
    given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-and-processing-a-resource-from-a-link-element:concept-response data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or
    a <a id=fetching-and-processing-a-resource-from-a-link-element:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>:</p>

    <ol><li><p>Let <var>success</var> be true.<li>
      <p>If any of the following are true:</p>

      <ul><li><p><var>bodyBytes</var> is null or failure; or<li><p><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-and-processing-a-resource-from-a-link-element:concept-response-status data-x-internal=concept-response-status>status</a> is not an
       <a id=fetching-and-processing-a-resource-from-a-link-element:ok-status href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul>

      <p>then set <var>success</var> to false.</p>

      <p class=note>Note that content-specific errors, e.g., CSS parse errors or PNG decoding
      errors, do not affect <var>success</var>.</p>
     <li>
      <p>Otherwise, wait for the <a href=links.html#external-resource-link id=fetching-and-processing-a-resource-from-a-link-element:external-resource-link-2>link
      resource</a>'s <a id=fetching-and-processing-a-resource-from-a-link-element:critical-subresources href=infrastructure.html#critical-subresources>critical subresources</a> to finish loading.</p>

      <p class=XXX>The specification that defines a link type's <a id=fetching-and-processing-a-resource-from-a-link-element:critical-subresources-2 href=infrastructure.html#critical-subresources>critical subresources</a>
      (e.g., CSS) is expected to describe how these subresources are fetched and processed. However,
      since this is not currently explicit, this specification describes waiting for a <a href=links.html#external-resource-link id=fetching-and-processing-a-resource-from-a-link-element:external-resource-link-3>link resource</a>'s <a id=fetching-and-processing-a-resource-from-a-link-element:critical-subresources-3 href=infrastructure.html#critical-subresources>critical subresources</a> to
      be fetched and processed, with the expectation that this will be done correctly.</p>
     <li><p><a href=#process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:process-the-linked-resource>Process the linked resource</a> given <var>el</var>, <var>success</var>,
     <var>response</var>, and <var>bodyBytes</var>.</ol>
   </ol>

  <p>To <dfn id=create-a-link-request>create a link request</dfn> given a <a href=#link-processing-options id=fetching-and-processing-a-resource-from-a-link-element:link-processing-options>link processing options</a>
  <var>options</var>:</p>

  <ol><li><p><a id=fetching-and-processing-a-resource-from-a-link-element:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>options</var>'s <a href=#link-options-href id=fetching-and-processing-a-resource-from-a-link-element:link-options-href>href</a> is
   not the empty string.<li><p>If <var>options</var>'s <a href=#link-options-destination id=fetching-and-processing-a-resource-from-a-link-element:link-options-destination>destination</a> is
   null, then return null.<li>
    <p>Let <var>url</var> be the result of <a id=fetching-and-processing-a-resource-from-a-link-element:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
    <var>options</var>'s <a href=#link-options-href id=fetching-and-processing-a-resource-from-a-link-element:link-options-href-2>href</a>, relative to
    <var>options</var>'s <a href=#link-options-base-url id=fetching-and-processing-a-resource-from-a-link-element:link-options-base-url>base URL</a>.</p>

    <p class=XXX>Passing the base URL instead of a document or environment is tracked by <a href=https://github.com/whatwg/html/issues/9715>issue #9715</a>.</p>
   <li><p>If <var>url</var> is failure, then return null.<li><p>Let <var>request</var> be the result of <a href=urls-and-fetching.html#create-a-potential-cors-request id=fetching-and-processing-a-resource-from-a-link-element:create-a-potential-cors-request>creating a potential-CORS request</a> given <var>url</var>, <var>options</var>'s
   <a href=#link-options-destination id=fetching-and-processing-a-resource-from-a-link-element:link-options-destination-2>destination</a>, and <var>options</var>'s <a href=#link-options-crossorigin id=fetching-and-processing-a-resource-from-a-link-element:link-options-crossorigin>crossorigin</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-policy-container id=fetching-and-processing-a-resource-from-a-link-element:concept-request-policy-container data-x-internal=concept-request-policy-container>policy
   container</a> to <var>options</var>'s <a href=#link-options-policy-container id=fetching-and-processing-a-resource-from-a-link-element:link-options-policy-container>policy
   container</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-and-processing-a-resource-from-a-link-element:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity
   metadata</a> to <var>options</var>'s <a href=#link-options-integrity id=fetching-and-processing-a-resource-from-a-link-element:link-options-integrity>integrity</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-and-processing-a-resource-from-a-link-element:concept-request-nonce-metadata data-x-internal=concept-request-nonce-metadata>cryptographic
   nonce metadata</a> to <var>options</var>'s <a href=#link-options-nonce id=fetching-and-processing-a-resource-from-a-link-element:link-options-nonce>cryptographic
   nonce metadata</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-and-processing-a-resource-from-a-link-element:concept-request-referrer-policy data-x-internal=concept-request-referrer-policy>referrer
   policy</a> to <var>options</var>'s <a href=#link-options-referrer-policy id=fetching-and-processing-a-resource-from-a-link-element:link-options-referrer-policy>referrer
   policy</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-and-processing-a-resource-from-a-link-element:concept-request-client data-x-internal=concept-request-client>client</a> to
   <var>options</var>'s <a href=#link-options-environment id=fetching-and-processing-a-resource-from-a-link-element:link-options-environment>environment</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-and-processing-a-resource-from-a-link-element:concept-request-priority data-x-internal=concept-request-priority>priority</a> to
   <var>options</var>'s <a href=#link-options-fetch-priority id=fetching-and-processing-a-resource-from-a-link-element:link-options-fetch-priority>fetch priority</a>.<li><p>Return <var>request</var>.</ol>

  <p>User agents may opt to only try to <a href=#fetch-and-process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:fetch-and-process-the-linked-resource-2>fetch
  and process</a> such resources when they are needed, instead of pro-actively fetching all the
  <a href=links.html#external-resource-link id=fetching-and-processing-a-resource-from-a-link-element:external-resource-link-4>external resources</a> that are not applied.</p>

  
  
  <p>Similar to the <a href=#fetch-and-process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:fetch-and-process-the-linked-resource-3>fetch and process the linked resource</a> algorithm, all <a href=links.html#external-resource-link id=fetching-and-processing-a-resource-from-a-link-element:external-resource-link-5>external resource links</a> have a <dfn id=process-the-linked-resource>process the linked
  resource</dfn> algorithm which takes a <code id=fetching-and-processing-a-resource-from-a-link-element:the-link-element-5><a href=#the-link-element>link</a></code> element <var>el</var>, boolean
  <var>success</var>, a <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-and-processing-a-resource-from-a-link-element:concept-response-2 data-x-internal=concept-response>response</a> <var>response</var>, and a
  <a id=fetching-and-processing-a-resource-from-a-link-element:byte-sequence-2 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>. Individual link types may provide their own
  <a href=#process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:process-the-linked-resource-2>process the linked resource</a> algorithm, but unless explicitly stated, that algorithm
  does nothing.</p>

  <p>Unless otherwise specified for a given <code id=fetching-and-processing-a-resource-from-a-link-element:attr-link-rel-2><a href=#attr-link-rel>rel</a></code> keyword, the
  element must <a id=fetching-and-processing-a-resource-from-a-link-element:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of the element's <a id=fetching-and-processing-a-resource-from-a-link-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> until
  all the attempts to <a href=#fetch-and-process-the-linked-resource id=fetching-and-processing-a-resource-from-a-link-element:fetch-and-process-the-linked-resource-4>fetch and process the linked resource</a> and its <a id=fetching-and-processing-a-resource-from-a-link-element:critical-subresources-4 href=infrastructure.html#critical-subresources>critical
  subresources</a> are complete. (Resources that the user agent has not yet attempted to fetch
  and process, e.g., because it is waiting for the resource to be needed, do not <a id=fetching-and-processing-a-resource-from-a-link-element:delay-the-load-event-2 href=parsing.html#delay-the-load-event>delay the
  load event</a>.)</p>

  <h5 id=processing-link-headers><span class=secno>4.2.4.4</span> Processing `<code id=processing-link-headers:http-link><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` headers<a href=#processing-link-headers class=self-link></a></h5>

  <p>All link types that can be <a href=links.html#external-resource-link id=processing-link-headers:external-resource-link>external resource
  links</a> define a <dfn id=process-a-link-header>process a link header</dfn> algorithm, which takes a <a href=#link-processing-options id=processing-link-headers:link-processing-options>link
  processing options</a>. This algorithm defines whether and how they react to appearing in an
  HTTP `<code id=processing-link-headers:http-link-2><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` response header.</p>

  <p class=note>For most link types, this algorithm does nothing. The <a href=links.html#table-link-relations>summary table</a> is a good reference to quickly know whether a link
  type has defined <a href=#process-a-link-header id=processing-link-headers:process-a-link-header>process a link header</a> steps.</p>

  <p>A <dfn id=link-processing-options>link processing options</dfn> is a <a id=processing-link-headers:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a>. It has the following
  <a href=https://infra.spec.whatwg.org/#struct-item id=processing-link-headers:struct-item data-x-internal=struct-item>items</a>:</p>

  <dl><dt><dfn id=link-options-href>href</dfn> (default the empty string)<dt><dfn id=link-options-destination>destination</dfn> (default the empty string)<dt><dfn id=link-options-initiator>initiator</dfn> (default "<code>link</code>")<dt><dfn id=link-options-integrity>integrity</dfn> (default the empty string)<dt><dfn id=link-options-type>type</dfn> (default the empty string)<dt><dfn id=link-options-nonce>cryptographic nonce metadata</dfn> (default the empty
   string)<dd>A string<dt><dfn id=link-options-crossorigin>crossorigin</dfn> (default <a href=urls-and-fetching.html#attr-crossorigin-none id=processing-link-headers:attr-crossorigin-none>No CORS</a>)<dd>A <a id=processing-link-headers:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a> state<dt><dfn id=link-options-referrer-policy>referrer policy</dfn> (default the empty
   string)<dd>A <a id=processing-link-headers:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a><dt><dfn id=link-options-source-set>source set</dfn> (default null)<dd>Null or a  <a id=processing-link-headers:source-set href=images.html#source-set>source set</a><dt><dfn id=link-options-base-url>base URL</dfn><dd>A <a id=processing-link-headers:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a><dt><dfn id=link-options-origin>origin</dfn><dd>An <a id=processing-link-headers:concept-origin href=browsers.html#concept-origin>origin</a><dt><dfn id=link-options-environment>environment</dfn><dd>An <a id=processing-link-headers:environment href=webappapis.html#environment>environment</a><dt><dfn id=link-options-policy-container>policy container</dfn><dd>A <a id=processing-link-headers:policy-container href=browsers.html#policy-container>policy container</a><dt><dfn id=link-options-document>document</dfn> (default null)<dd>Null or a <code id=processing-link-headers:document><a href=dom.html#document>Document</a></code><dt><dfn id=link-options-on-document-ready>on document ready</dfn> (default null)<dd>Null or an algorithm accepting a <code id=processing-link-headers:document-2><a href=dom.html#document>Document</a></code><dt><dfn id=link-options-fetch-priority>fetch priority</dfn> (default <code id=processing-link-headers:attr-fetchpriority-auto-state><a href=urls-and-fetching.html#attr-fetchpriority-auto-state>Auto</a></code>)<dd>A <a id=processing-link-headers:fetch-priority-attribute href=urls-and-fetching.html#fetch-priority-attribute>fetch priority attribute</a> state</dl>

  <p class=note>A <a href=#link-processing-options id=processing-link-headers:link-processing-options-2>link processing options</a> has a <a href=#link-options-base-url id=processing-link-headers:link-options-base-url>base URL</a> and an <a href=#link-options-href id=processing-link-headers:link-options-href>href</a>
  rather than a parsed URL because the URL could be a result of the options's <a href=#link-options-source-set id=processing-link-headers:link-options-source-set>source set</a>.</p>

  <p>To <dfn id=create-link-options-from-element>create link options from element</dfn> given a <code id=processing-link-headers:the-link-element><a href=#the-link-element>link</a></code> element
  <var>el</var>:</p>

  <ol><li><p>Let <var>document</var> be <var>el</var>'s <a id=processing-link-headers:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>
    <p>Let <var>options</var> be a new <a href=#link-processing-options id=processing-link-headers:link-processing-options-3>link processing options</a> with</p>

    <dl class=props><dt><a href=#link-options-destination id=processing-link-headers:link-options-destination>destination</a><dd>the result of <a href=links.html#translate-a-preload-destination id=processing-link-headers:translate-a-preload-destination>translating</a> the state of <var>el</var>'s <code id=processing-link-headers:attr-link-as><a href=#attr-link-as>as</a></code> attribute<dt><a href=#link-options-crossorigin id=processing-link-headers:link-options-crossorigin>crossorigin</a><dd>the state of <var>el</var>'s <code id=processing-link-headers:attr-link-crossorigin><a href=#attr-link-crossorigin>crossorigin</a></code>
     content attribute<dt><a href=#link-options-referrer-policy id=processing-link-headers:link-options-referrer-policy>referrer policy</a><dd>the state of <var>el</var>'s <code id=processing-link-headers:attr-link-referrerpolicy><a href=#attr-link-referrerpolicy>referrerpolicy</a></code>
     content attribute<dt><a href=#link-options-source-set id=processing-link-headers:link-options-source-set-2>source set</a><dd><var>el</var>'s <a id=processing-link-headers:source-set-2 href=images.html#source-set>source set</a><dt><a href=#link-options-base-url id=processing-link-headers:link-options-base-url-2>base URL</a><dd><var>document</var>'s <a id=processing-link-headers:document-base-url href=urls-and-fetching.html#document-base-url>document base URL</a><dt><a href=#link-options-origin id=processing-link-headers:link-options-origin>origin</a><dd><var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=processing-link-headers:concept-document-origin data-x-internal=concept-document-origin>origin</a><dt><a href=#link-options-environment id=processing-link-headers:link-options-environment>environment</a><dd><var>document</var>'s <a id=processing-link-headers:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a><dt><a href=#link-options-policy-container id=processing-link-headers:link-options-policy-container>policy container</a><dd><var>document</var>'s <a href=dom.html#concept-document-policy-container id=processing-link-headers:concept-document-policy-container>policy container</a><dt><a href=#link-options-document id=processing-link-headers:link-options-document>document</a><dd><var>document</var><dt><a href=#link-options-nonce id=processing-link-headers:link-options-nonce>cryptographic nonce metadata</a><dd>the current value of <var>el</var>'s <a id=processing-link-headers:cryptographicnonce href=urls-and-fetching.html#cryptographicnonce>[[CryptographicNonce]]</a> internal slot<dt><a href=#link-options-fetch-priority id=processing-link-headers:link-options-fetch-priority>fetch priority</a><dd>the state of <var>el</var>'s <code id=processing-link-headers:attr-link-fetchpriority><a href=#attr-link-fetchpriority>fetchpriority</a></code>
     content attribute</dl>
   <li><p>If <var>el</var> has an <code id=processing-link-headers:attr-link-href><a href=#attr-link-href>href</a></code> attribute, then set
   <var>options</var>'s <a href=#link-options-href id=processing-link-headers:link-options-href-2>href</a> to the value of
   <var>el</var>'s <code id=processing-link-headers:attr-link-href-2><a href=#attr-link-href>href</a></code> attribute.<li><p>If <var>el</var> has an <code id=processing-link-headers:attr-link-integrity><a href=#attr-link-integrity>integrity</a></code> attribute,
   then set <var>options</var>'s <a href=#link-options-integrity id=processing-link-headers:link-options-integrity>integrity</a> to the
   value of <var>el</var>'s <code id=processing-link-headers:attr-link-integrity-2><a href=#attr-link-integrity>integrity</a></code> content
   attribute.<li><p>If <var>el</var> has a <code id=processing-link-headers:attr-link-type><a href=#attr-link-type>type</a></code> attribute, then set
   <var>options</var>'s <a href=#link-options-type id=processing-link-headers:link-options-type>type</a> to the value of
   <var>el</var>'s <code id=processing-link-headers:attr-link-type-2><a href=#attr-link-type>type</a></code> attribute.<li>
    <p><a id=processing-link-headers:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>options</var>'s <a href=#link-options-href id=processing-link-headers:link-options-href-3>href</a> is not
    the empty string, or <var>options</var>'s <a href=#link-options-source-set id=processing-link-headers:link-options-source-set-3>source
    set</a> is not null.</p>

    <p>A <code id=processing-link-headers:the-link-element-2><a href=#the-link-element>link</a></code> element with neither an <code id=processing-link-headers:attr-link-href-3><a href=#attr-link-href>href</a></code> or an
    <code id=processing-link-headers:attr-link-imagesrcset><a href=#attr-link-imagesrcset>imagesrcset</a></code> does not represent a link.</p>
   <li><p>Return <var>options</var>.</ol>

  <p>To <dfn id=extract-links-from-headers>extract links from headers</dfn> given a <a href=https://fetch.spec.whatwg.org/#concept-header-list id=processing-link-headers:concept-header-list data-x-internal=concept-header-list>header
  list</a> <var>headers</var>:</p>

  <ol><li><p>Let <var>links</var> be a new <a id=processing-link-headers:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li><p>Let <var>rawLinkHeaders</var> be the result of <a href=https://fetch.spec.whatwg.org/#concept-header-list-get-decode-split id=processing-link-headers:concept-header-list-get-decode-split data-x-internal=concept-header-list-get-decode-split>getting, decoding, and splitting</a>
   `<code id=processing-link-headers:the-link-element-3><a href=#the-link-element>Link</a></code>` from <var>headers</var>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=processing-link-headers:list-iterate data-x-internal=list-iterate>For each</a> <var>linkHeader</var> of
    <var>rawLinkHeaders</var>:</p>

    <ol><li><p>Let <var>linkObject</var> be the result of <a href=https://httpwg.org/specs/rfc8288.html#parse-fv id=processing-link-headers:parsing-a-link-field-value data-x-internal=parsing-a-link-field-value>parsing</a> <var>linkHeader</var>. <a href=references.html#refsWEBLINK>[WEBLINK]</a><li><p>If <var>linkObject</var>["<code>target_uri</code>"] does not
     <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists data-x-internal=map-exists>exist</a>, then <a id=processing-link-headers:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=processing-link-headers:list-append data-x-internal=list-append>Append</a> <var>linkObject</var> to
     <var>links</var>.</ol>
   <li><p>Return <var>links</var>.</ol>

  <p>To <dfn id=process-link-headers>process link headers</dfn> given a <code id=processing-link-headers:document-3><a href=dom.html#document>Document</a></code> <var>doc</var>,
  a <a href=https://fetch.spec.whatwg.org/#concept-response id=processing-link-headers:concept-response data-x-internal=concept-response>response</a> <var>response</var>, and a
  "<code>pre-media</code>" or "<code>media</code>" <var>phase</var>:</p>

  <ol><li><p>Let <var>links</var> be the result of <a href=#extract-links-from-headers id=processing-link-headers:extract-links-from-headers>extracting links</a> from <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=processing-link-headers:concept-response-header-list data-x-internal=concept-response-header-list>header list</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=processing-link-headers:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>linkObject</var> in <var>links</var>:</p>

    <ol><li><p>Let <var>rel</var> be <var>linkObject</var>["<code>relation_type</code>"].<li><p>Let <var>attribs</var> be <var>linkObject</var>["<code>target_attributes</code>"].<li><p>Let <var>expectedPhase</var> be "<code>media</code>" if either "<code id=processing-link-headers:attr-img-srcset><a href=embedded-content.html#attr-img-srcset>srcset</a></code>", "<code id=processing-link-headers:attr-link-imagesrcset-2><a href=#attr-link-imagesrcset>imagesrcset</a></code>", or "<code id=processing-link-headers:attr-link-media><a href=#attr-link-media>media</a></code>" <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-2 data-x-internal=map-exists>exist</a> in
     <var>attribs</var>; otherwise "<code>pre-media</code>".<li><p>If <var>expectedPhase</var> is not <var>phase</var>, then
     <a id=processing-link-headers:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-media-2><a href=#attr-link-media>media</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-3 data-x-internal=map-exists>exists</a> and <var>attribs</var>["<code id=processing-link-headers:attr-link-media-3><a href=#attr-link-media>media</a></code>"]
     does not <a href=common-microsyntaxes.html#matches-the-environment id=processing-link-headers:matches-the-environment>match the environment</a>, then
     <a id=processing-link-headers:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>
      <p>Let <var>options</var> be a new <a href=#link-processing-options id=processing-link-headers:link-processing-options-4>link processing options</a> with</p>

      <dl class=props><dt><a href=#link-options-href id=processing-link-headers:link-options-href-4>href</a><dd><var>linkObject</var>["<code>target_uri</code>"]<dt><a href=#link-options-base-url id=processing-link-headers:link-options-base-url-3>base URL</a><dd><var>doc</var>'s <a id=processing-link-headers:document-base-url-2 href=urls-and-fetching.html#document-base-url>document base URL</a><dt><a href=#link-options-origin id=processing-link-headers:link-options-origin-2>origin</a><dd><var>doc</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=processing-link-headers:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a><dt><a href=#link-options-environment id=processing-link-headers:link-options-environment-2>environment</a><dd><var>doc</var>'s <a id=processing-link-headers:relevant-settings-object-2 href=webappapis.html#relevant-settings-object>relevant settings object</a><dt><a href=#link-options-policy-container id=processing-link-headers:link-options-policy-container-2>policy container</a><dd><var>doc</var>'s <a href=dom.html#concept-document-policy-container id=processing-link-headers:concept-document-policy-container-2>policy
       container</a><dt><a href=#link-options-document id=processing-link-headers:link-options-document-2>document</a><dd><var>doc</var></dl>
     <li><p><a href=#apply-link-options-from-parsed-header-attributes id=processing-link-headers:apply-link-options-from-parsed-header-attributes>Apply link options from parsed header attributes</a> to <var>options</var>
     given <var>attribs</var>.<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-imagesrcset-3><a href=#attr-link-imagesrcset>imagesrcset</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-4 data-x-internal=map-exists>exists</a> and <var>attribs</var>["<code id=processing-link-headers:attr-link-imagesizes><a href=#attr-link-imagesizes>imagesizes</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-5 data-x-internal=map-exists>exists</a>,
     then set <var>options</var>'s <a href=#link-options-source-set id=processing-link-headers:link-options-source-set-4>source set</a> to the
     result of <a href=images.html#create-a-source-set id=processing-link-headers:create-a-source-set>creating a source set</a> given
     <var>linkObject</var>["<code>target_uri</code>"], <var>attribs</var>["<code id=processing-link-headers:attr-link-imagesrcset-4><a href=#attr-link-imagesrcset>imagesrcset</a></code>"], <var>attribs</var>["<code id=processing-link-headers:attr-link-imagesizes-2><a href=#attr-link-imagesizes>imagesizes</a></code>"], and null.<li><p>Run the <a href=#process-a-link-header id=processing-link-headers:process-a-link-header-2>process a link header</a> steps for <var>rel</var> given
     <var>options</var>.</ol>
   </ol>

  <p>To <dfn id=apply-link-options-from-parsed-header-attributes>apply link options from parsed header attributes</dfn> to a <a href=#link-processing-options id=processing-link-headers:link-processing-options-5>link processing
  options</a> <var>options</var> given <var>attribs</var>:</p>

  <ol><li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-as-2><a href=#attr-link-as>as</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-6 data-x-internal=map-exists>exists</a>, then set <var>options</var>'s <a href=#link-options-destination id=processing-link-headers:link-options-destination-2>destination</a> to the result of <a href=links.html#translate-a-preload-destination id=processing-link-headers:translate-a-preload-destination-2>translating</a> <var>attribs</var>["<code id=processing-link-headers:attr-link-as-3><a href=#attr-link-as>as</a></code>"].<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-crossorigin-2><a href=#attr-link-crossorigin>crossorigin</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-7 data-x-internal=map-exists>exists</a> and is an <a id=processing-link-headers:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of
   the <a id=processing-link-headers:cors-settings-attribute-2 href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a> <a href=common-microsyntaxes.html#enumerated-attribute id=processing-link-headers:enumerated-attribute>keywords</a>,
   then set <var>options</var>'s <a href=#link-options-crossorigin id=processing-link-headers:link-options-crossorigin-2>crossorigin</a> to the
   <a id=processing-link-headers:cors-settings-attribute-3 href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a> state corresponding to that keyword.<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-integrity-3><a href=#attr-link-integrity>integrity</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-8 data-x-internal=map-exists>exists</a>, then set <var>options</var>'s <a href=#link-options-integrity id=processing-link-headers:link-options-integrity-2>integrity</a> to <var>attribs</var>["<code id=processing-link-headers:attr-link-integrity-4><a href=#attr-link-integrity>integrity</a></code>"].<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-referrerpolicy-2><a href=#attr-link-referrerpolicy>referrerpolicy</a></code>"]
   <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-9 data-x-internal=map-exists>exists</a> and is an <a id=processing-link-headers:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
   some <a id=processing-link-headers:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>, then set <var>options</var>'s <a href=#link-options-referrer-policy id=processing-link-headers:link-options-referrer-policy-2>referrer policy</a> to that <a id=processing-link-headers:referrer-policy-3 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>.<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-nonce><a href=urls-and-fetching.html#attr-nonce>nonce</a></code>"]
   <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-10 data-x-internal=map-exists>exists</a>, then set <var>options</var>'s <a href=#link-options-nonce id=processing-link-headers:link-options-nonce-2>nonce</a> to <var>attribs</var>["<code id=processing-link-headers:attr-nonce-2><a href=urls-and-fetching.html#attr-nonce>nonce</a></code>"].<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-type-3><a href=#attr-link-type>type</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-11 data-x-internal=map-exists>exists</a>, then set <var>options</var>'s <a href=#link-options-type id=processing-link-headers:link-options-type-2>type</a> to <var>attribs</var>["<code id=processing-link-headers:attr-link-type-4><a href=#attr-link-type>type</a></code>"].<li><p>If <var>attribs</var>["<code id=processing-link-headers:attr-link-fetchpriority-2><a href=#attr-link-fetchpriority>fetchpriority</a></code>"]
   <a href=https://infra.spec.whatwg.org/#map-exists id=processing-link-headers:map-exists-12 data-x-internal=map-exists>exists</a> and is an <a id=processing-link-headers:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
   a <a id=processing-link-headers:fetch-priority-attribute-2 href=urls-and-fetching.html#fetch-priority-attribute>fetch priority attribute</a> keyword, then set <var>options</var>'s <a href=#link-options-fetch-priority id=processing-link-headers:link-options-fetch-priority-2>fetch priority</a> to that <a id=processing-link-headers:fetch-priority-attribute-3 href=urls-and-fetching.html#fetch-priority-attribute>fetch priority
   attribute</a> keyword.</ol>



  <h5 id=early-hints><span class=secno>4.2.4.5</span> Early hints<a href=#early-hints class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103 title="The HTTP 103 Early Hints information response may be sent by a server while it is still preparing a response, with hints about the resources that the server is expecting the final response will link. This allows a browser to start preloading resources even before the server has prepared and sent that final response.">Status/103</a><div class=support><span class="firefox yes"><span>Firefox</span><span>preview+</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>103+</span></span><hr><span class="opera no"><span>Opera</span><span>No</span></span><span class="edge_blink yes"><span>Edge</span><span>103+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p><dfn id=early-hints-2>Early hints</dfn> allow user-agents to perform some operations, such as to speculatively
  load resources that are likely to be used by the document, before the navigation request is fully
  handled by the server and a response code is served. Servers can indicate early hints by serving a
  <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response data-x-internal=concept-response>response</a> with a 103 status code before serving the final
  <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response-2 data-x-internal=concept-response>response</a>.<a href=references.html#refsRFC8297>[RFC8297]</a></p>

  <p class=note>For compatibility reasons <a href=https://httpwg.org/specs/rfc8297.html#security-considerations>early hints are typically
  delivered over HTTP/2 or above</a>, but for readability we use HTTP/1.1-style notation below.</p>

  <div class=example>
   <p>For example, given the following sequence of responses:</p>
   <pre>103 Early Hint
Link: &lt;/image.png>; <a href=#attr-link-rel id=early-hints:attr-link-rel>rel</a>=<a href=links.html#link-type-preload id=early-hints:link-type-preload>preload</a>; <a href=#attr-link-as id=early-hints:attr-link-as>as</a>=image</pre>

   <pre>200 OK
Content-Type: text/html

&lt;!DOCTYPE html>
...
&lt;img src="/image.png"></pre>

   <p>the image will start loading before the HTML content arrives.</p>
  </div>

  <p class=note>Only the first early hint response served during the navigation is handled, and it
  is discarded if it is succeeded by a cross-origin redirect.</p>

  <p>In addition to the `<code id=early-hints:http-link><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` headers, it is possible that the 103
  response contains a <a id=early-hints:content-security-policy href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security Policy</a> header, which is enforced when processing
  the early hint.</p>

  <div class=example>
   <p>For example, given the following sequence of responses:</p>
   <pre>103 Early Hint
Content-Security-Policy: style-src: self;
Link: &lt;/style.css>; <a href=#attr-link-rel id=early-hints:attr-link-rel-2>rel</a>=<a href=links.html#link-type-preload id=early-hints:link-type-preload-2>preload</a>; <a href=#attr-link-as id=early-hints:attr-link-as-2>as</a>=style</pre>

   <pre>103 Early Hint
Link: &lt;/image.png>; <a href=#attr-link-rel id=early-hints:attr-link-rel-3>rel</a>=<a href=links.html#link-type-preload id=early-hints:link-type-preload-3>preload</a>; <a href=#attr-link-as id=early-hints:attr-link-as-3>as</a>=image</pre>

   <pre>302 Redirect
Location: /alternate.html</pre>

   <pre>200 OK
Content-Security-Policy: style-src: none;
Link: &lt;/font.ttf>; <a href=#attr-link-rel id=early-hints:attr-link-rel-4>rel</a>=<a href=links.html#link-type-preload id=early-hints:link-type-preload-4>preload</a>; <a href=#attr-link-as id=early-hints:attr-link-as-4>as</a>=font</pre>

   <p>The font and style would be loaded, and the image will be discarded, as only the first early
   hint response in the final redirect chain is respected. The late <a id=early-hints:content-security-policy-2 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security
   Policy</a> header comes after the request to fetch the style has already been performed, but
   the style will not be accessible to the document.</p>
  </div>

  <p>To <dfn id=process-early-hint-headers>process early hint headers</dfn> given a <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response-3 data-x-internal=concept-response>response</a> <var>response</var> and an <a id=early-hints:environment href=webappapis.html#environment>environment</a>
  <var>reservedEnvironment</var>:</p>

  <p class=note>Early-hint `<code id=early-hints:http-link-2><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` headers are always processed
  before `<code id=early-hints:http-link-3><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` headers from the final <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response-4 data-x-internal=concept-response>response</a>, followed by <code id=early-hints:the-link-element><a href=#the-link-element>link</a></code> elements. This is
  equivalent to prepending the contents of the early and final `<code id=early-hints:http-link-4><a data-x-internal=http-link href=https://httpwg.org/specs/rfc8288.html#header>Link</a></code>` headers to the <code id=early-hints:document><a href=dom.html#document>Document</a></code>'s <code id=early-hints:the-head-element><a href=#the-head-element>head</a></code> element,
  in respective order.</p>

  <ol><li>
    <p>Let <var>earlyPolicyContainer</var> be the result of <a id=early-hints:creating-a-policy-container-from-a-fetch-response href=browsers.html#creating-a-policy-container-from-a-fetch-response>creating a policy container from
    a fetch response</a> given <var>response</var> and <var>reservedEnvironment</var>.</p>

    <p class=note>This allows the early hint <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response-5 data-x-internal=concept-response>response</a> to
    include a <a id=early-hints:content-security-policy-3 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security Policy</a> which would be <a href=https://w3c.github.io/webappsec-csp/#enforced id=early-hints:enforce-the-policy data-x-internal=enforce-the-policy>enforced</a> when fetching the early hint <a href=https://fetch.spec.whatwg.org/#concept-request id=early-hints:concept-request data-x-internal=concept-request>request</a>.</p>
   <li><p>Let <var>links</var> be the result of <a href=#extract-links-from-headers id=early-hints:extract-links-from-headers>extracting links</a> from <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=early-hints:concept-response-header-list data-x-internal=concept-response-header-list>header list</a>.<li><p>Let <var>earlyHints</var> be an empty <a id=early-hints:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=early-hints:list-iterate data-x-internal=list-iterate>For each</a> <var>linkObject</var> in <var>links</var>:</p>

    <p class=note>The moment we receive the early hint link header, we begin <a href=https://fetch.spec.whatwg.org/#concept-fetch id=early-hints:concept-fetch data-x-internal=concept-fetch>fetching</a> <var>earlyRequest</var>. If it comes back before the
    <code id=early-hints:document-2><a href=dom.html#document>Document</a></code> is created, we set <var>earlyResponse</var> to the <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response-6 data-x-internal=concept-response>response</a> of that <a href=https://fetch.spec.whatwg.org/#concept-fetch id=early-hints:concept-fetch-2 data-x-internal=concept-fetch>fetch</a> and
    once the <code id=early-hints:document-3><a href=dom.html#document>Document</a></code> is created we commit it (by making it available in the <a id=early-hints:map-of-preloaded-resources href=links.html#map-of-preloaded-resources>map
    of preloaded resources</a> as if it was a <code id=early-hints:the-link-element-2><a href=#the-link-element>link</a></code> element). If the
    <code id=early-hints:document-4><a href=dom.html#document>Document</a></code> is created first, the <a href=https://fetch.spec.whatwg.org/#concept-response id=early-hints:concept-response-7 data-x-internal=concept-response>response</a> is
    committed as soon as it becomes available.</p>

    <ol><li><p>Let <var>rel</var> be <var>linkObject</var>["<code>relation_type</code>"].<li>
      <p>Let <var>options</var> be a new <a href=#link-processing-options id=early-hints:link-processing-options>link processing options</a> with</p>

      <dl class=props><dt><a href=#link-options-href id=early-hints:link-options-href>href</a><dd><var>linkObject</var>["<code>target_uri</code>"]<dt><a href=#link-options-initiator id=early-hints:link-options-initiator>initiator</a><dd>"<code>early-hint</code>"<dt><a href=#link-options-base-url id=early-hints:link-options-base-url>base URL</a><dd><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=early-hints:concept-response-url data-x-internal=concept-response-url>URL</a><dt><a href=#link-options-origin id=early-hints:link-options-origin>origin</a><dd><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=early-hints:concept-response-url-2 data-x-internal=concept-response-url>URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-origin id=early-hints:concept-url-origin data-x-internal=concept-url-origin>origin</a><dt><a href=#link-options-environment id=early-hints:link-options-environment>environment</a><dd><var>reservedEnvironment</var><dt><a href=#link-options-policy-container id=early-hints:link-options-policy-container>policy container</a><dd><var>earlyPolicyContainer</var></dl>
     <li>
      <p>Let <var>attribs</var> be <var>linkObject</var>["<code>target_attributes</code>"].</p>

      <p class=note>Only the <code id=early-hints:attr-link-as-5><a href=#attr-link-as>as</a></code>, <code id=early-hints:attr-link-crossorigin><a href=#attr-link-crossorigin>crossorigin</a></code>, <code id=early-hints:attr-link-integrity><a href=#attr-link-integrity>integrity</a></code>, and <code id=early-hints:attr-link-type><a href=#attr-link-type>type</a></code>
      attributes are handled as part of early hint processing. The other ones, in particular <code id=early-hints:attr-link-blocking><a href=#attr-link-blocking>blocking</a></code>, <code id=early-hints:attr-link-imagesrcset><a href=#attr-link-imagesrcset>imagesrcset</a></code>, <code id=early-hints:attr-link-imagesizes><a href=#attr-link-imagesizes>imagesizes</a></code>, and <code id=early-hints:attr-link-media><a href=#attr-link-media>media</a></code> are only applicable once a <code id=early-hints:document-5><a href=dom.html#document>Document</a></code> is
      created.</p>
     <li><p><a href=#apply-link-options-from-parsed-header-attributes id=early-hints:apply-link-options-from-parsed-header-attributes>Apply link options from parsed header attributes</a> to <var>options</var>
     given <var>attribs</var>.<li><p>Run the <a href=#process-a-link-header id=early-hints:process-a-link-header>process a link header</a> steps for <var>rel</var> given
     <var>options</var>.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=early-hints:list-append data-x-internal=list-append>Append</a> <var>options</var> to
     <var>earlyHints</var>.</ol>
   <li>
    <p>Return the following substeps given <code id=early-hints:document-6><a href=dom.html#document>Document</a></code> <var>doc</var>: <a href=https://infra.spec.whatwg.org/#list-iterate id=early-hints:list-iterate-2 data-x-internal=list-iterate>for each</a> <var>options</var> in <var>earlyHints</var>:</p>

    <ol><li><p>If <var>options</var>'s <a href=#link-options-on-document-ready id=early-hints:link-options-on-document-ready>on document ready</a> is null, then set
     <var>options</var>'s <a href=#link-options-document id=early-hints:link-options-document>document</a> to
     <var>doc</var>.<li><p>Otherwise, call <var>options</var>'s <a href=#link-options-on-document-ready id=early-hints:link-options-on-document-ready-2>on document ready</a> with <var>doc</var>.</ol>
   </ol>

  

  <h5 id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element><span class=secno>4.2.4.6</span> Providing users with a means to follow hyperlinks created using the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:the-link-element><a href=#the-link-element>link</a></code>
  element<a href=#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element class=self-link></a></h5>

  <p id=linkui>Interactive user agents may provide users with a means to <a href=links.html#following-hyperlinks-2 id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:following-hyperlinks-2>follow the hyperlinks</a> created using the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:the-link-element-2><a href=#the-link-element>link</a></code> element, somewhere
  within their user interface. Such invocations of the <a href=links.html#following-hyperlinks-2 id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:following-hyperlinks-2-2>follow
  the hyperlink</a> algorithm must set the <i id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:following-userinvolvement><a href=links.html#following-userinvolvement>userInvolvement</a></i> argument to "<code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:uni-browser-ui><a href=browsing-the-web.html#uni-browser-ui>browser UI</a></code>". The exact interface is not defined by this
  specification, but it could include the following information (obtained from the element's
  attributes, again as defined below), in some form or another (possibly simplified), for each
  <a id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:hyperlink href=links.html#hyperlink>hyperlink</a> created with each <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:the-link-element-3><a href=#the-link-element>link</a></code> element in the document:</p>

  <ul><li>The relationship between this document and the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)<li>The title of the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-title><a href=#attr-link-title>title</a></code>
   attribute).<li>The address of the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-href><a href=#attr-link-href>href</a></code>
   attribute).<li>The language of the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code>
   attribute).<li>The optimum media for the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-media><a href=#attr-link-media>media</a></code>
   attribute).</ul>

  <p>User agents could also include other information, such as the type of the resource (as given by
  the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>




  <h4 id=the-meta-element><span class=secno>4.2.5</span> The <dfn id=meta data-dfn-type=element><code>meta</code></dfn>
  element<a href=#the-meta-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta title="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">Element/meta</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMetaElement title="The HTMLMetaElement interface contains descriptive metadata about a document provided in HTML as <meta> elements. This interface inherits all of the properties and methods described in the HTMLElement interface.">HTMLMetaElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-meta-element:concept-element-categories>Categories</a>:<dd><a id=the-meta-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a id=the-meta-element:flow-content-2 href=dom.html#flow-content-2>flow content</a>.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute-2><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a id=the-meta-element:phrasing-content-2 href=dom.html#phrasing-content-2>phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-meta-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>If the <code id=the-meta-element:attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute is present, or if the element's <code id=the-meta-element:attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is in the <a href=#attr-meta-http-equiv-content-type id=the-meta-element:attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code id=the-meta-element:the-head-element><a href=#the-head-element>head</a></code> element.<dd>If the <code id=the-meta-element:attr-meta-http-equiv-2><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type id=the-meta-element:attr-meta-http-equiv-content-type-2>Encoding declaration state</a>: in a <code id=the-meta-element:the-head-element-2><a href=#the-head-element>head</a></code> element.<dd>If the <code id=the-meta-element:attr-meta-http-equiv-3><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type id=the-meta-element:attr-meta-http-equiv-content-type-3>Encoding declaration state</a>: in a <code id=the-meta-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> element that is a child of a <code id=the-meta-element:the-head-element-3><a href=#the-head-element>head</a></code> element.<dd>If the <code id=the-meta-element:attr-meta-name><a href=#attr-meta-name>name</a></code> attribute is present: where <a id=the-meta-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute-3><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a id=the-meta-element:metadata-content-2-3 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute-4><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a id=the-meta-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-meta-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-meta-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-meta-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-meta-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-meta-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-meta-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-meta-element:attr-meta-name-2><a href=#attr-meta-name>name</a></code> —  Metadata name
     <dd><code id=the-meta-element:attr-meta-http-equiv-4><a href=#attr-meta-http-equiv>http-equiv</a></code> —  Pragma directive
     <dd><code id=the-meta-element:attr-meta-content><a href=#attr-meta-content>content</a></code> —  Value of the element
     <dd><code id=the-meta-element:attr-meta-charset-2><a href=#attr-meta-charset>charset</a></code> —  <a href=#character-encoding-declaration id=the-meta-element:character-encoding-declaration>Character encoding declaration</a>
     <dd><code id=the-meta-element:attr-meta-media><a href=#attr-meta-media>media</a></code> —  Applicable media
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-meta-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-meta>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-meta>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-meta-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlmetaelement' data-dfn-type='interface'><c- g>HTMLMetaElement</c-></dfn> : <a id='the-meta-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-meta-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-meta-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-meta-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLMetaElement' id='dom-meta-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<a id='the-meta-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-meta-element:xattr-reflect-2'>Reflect</a>=&quot;<a href='#attr-meta-http-equiv' id='the-meta-element:attr-meta-http-equiv-5'>http-equiv</a>&quot;] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLMetaElement' id='dom-meta-httpequiv' data-dfn-type='attribute'><c- g>httpEquiv</c-></dfn>;
  [<a id='the-meta-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-meta-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLMetaElement' id='dom-meta-content' data-dfn-type='attribute'><c- g>content</c-></dfn>;
  [<a id='the-meta-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-meta-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLMetaElement' id='dom-meta-media' data-dfn-type='attribute'><c- g>media</c-></dfn>;

  // <a href='obsolete.html#HTMLMetaElement-partial'>also has obsolete members</a>
};</code></pre>
   </dl>

  <p>The <code id=the-meta-element:the-meta-element><a href=#the-meta-element>meta</a></code> element <a id=the-meta-element:represents href=dom.html#represents>represents</a> various kinds of metadata that cannot be
  expressed using the <code id=the-meta-element:the-title-element><a href=#the-title-element>title</a></code>, <code id=the-meta-element:the-base-element><a href=#the-base-element>base</a></code>, <code id=the-meta-element:the-link-element><a href=#the-link-element>link</a></code>, <code id=the-meta-element:the-style-element><a href=#the-style-element>style</a></code>,
  and <code id=the-meta-element:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements.</p>

  <p>The <code id=the-meta-element:the-meta-element-2><a href=#the-meta-element>meta</a></code> element can represent document-level metadata with the <code id=the-meta-element:attr-meta-name-3><a href=#attr-meta-name>name</a></code> attribute, pragma directives with the <code id=the-meta-element:attr-meta-http-equiv-6><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the file's <a href=#character-encoding-declaration id=the-meta-element:character-encoding-declaration-2>character encoding
  declaration</a> when an HTML document is serialized to string form (e.g. for transmission over
  the network or for disk storage) with the <code id=the-meta-element:attr-meta-charset-3><a href=#attr-meta-charset>charset</a></code>
  attribute.</p>

  <p>Exactly one of the <code id=the-meta-element:attr-meta-name-4><a href=#attr-meta-name>name</a></code>, <code id=the-meta-element:attr-meta-http-equiv-7><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code id=the-meta-element:attr-meta-charset-4><a href=#attr-meta-charset>charset</a></code>,
  and <code id=the-meta-element:names:-the-itemprop-attribute-5><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attributes must be specified.</p>

  <p>If either <code id=the-meta-element:attr-meta-name-5><a href=#attr-meta-name>name</a></code>, <code id=the-meta-element:attr-meta-http-equiv-8><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code id=the-meta-element:names:-the-itemprop-attribute-6><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> is
  specified, then the <code id=the-meta-element:attr-meta-content-2><a href=#attr-meta-content>content</a></code> attribute must also be
  specified. Otherwise, it must be omitted.</p>

  <p>The <dfn data-dfn-for=meta id=attr-meta-charset data-dfn-type=element-attr><code>charset</code></dfn>
  attribute specifies the <a href=https://encoding.spec.whatwg.org/#encoding id=the-meta-element:encoding data-x-internal=encoding>character encoding</a> used by the document.
  This is a <a href=#character-encoding-declaration id=the-meta-element:character-encoding-declaration-3>character encoding declaration</a>. If the attribute is present, its value must
  be an <a id=the-meta-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>utf-8</code>".</p>

  <p class=note>The <code id=the-meta-element:attr-meta-charset-5><a href=#attr-meta-charset>charset</a></code> attribute on the
  <code id=the-meta-element:the-meta-element-3><a href=#the-meta-element>meta</a></code> element has no effect in XML documents, but is allowed in XML documents in order
  to facilitate migration to and from XML.</p>

  <p>There must not be more than one <code id=the-meta-element:the-meta-element-4><a href=#the-meta-element>meta</a></code> element with a <code id=the-meta-element:attr-meta-charset-6><a href=#attr-meta-charset>charset</a></code> attribute per document.</p>

  <p>The <dfn data-dfn-for=meta id=attr-meta-content data-dfn-type=element-attr><code>content</code></dfn>
  attribute gives the value of the document metadata or pragma directive when the element is used
  for those purposes. The allowed values depend on the exact context, as described in subsequent
  sections of this specification.</p>

  <p>If a <code id=the-meta-element:the-meta-element-5><a href=#the-meta-element>meta</a></code> element has a <dfn data-dfn-for=meta id=attr-meta-name data-dfn-type=element-attr><code>name</code></dfn> attribute, it sets document metadata. Document metadata
  is expressed in terms of name-value pairs, the <code id=the-meta-element:attr-meta-name-6><a href=#attr-meta-name>name</a></code> attribute
  on the <code id=the-meta-element:the-meta-element-6><a href=#the-meta-element>meta</a></code> element giving the name, and the <code id=the-meta-element:attr-meta-content-3><a href=#attr-meta-content>content</a></code> attribute on the same element giving the value. The name
  specifies what aspect of metadata is being set; valid names and the meaning of their values are
  described in the following sections. If a <code id=the-meta-element:the-meta-element-7><a href=#the-meta-element>meta</a></code> element has no <code id=the-meta-element:attr-meta-content-4><a href=#attr-meta-content>content</a></code> attribute, then the value part of the metadata
  name-value pair is the empty string.</p>

  <p>The <dfn data-dfn-for=meta id=attr-meta-media data-dfn-type=element-attr><code>media</code></dfn> attribute
  says which media the metadata applies to. The value must be a <a id=the-meta-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query list</a>.
  Unless the <code id=the-meta-element:attr-meta-name-7><a href=#attr-meta-name>name</a></code> is <code id=the-meta-element:meta-theme-color><a href=#meta-theme-color>theme-color</a></code>, the <code id=the-meta-element:attr-meta-media-2><a href=#attr-meta-media>media</a></code>
  attribute has no effect on the processing model and must not be used by authors.</p>


  <h5 id=standard-metadata-names><span class=secno>4.2.5.1</span> Standard metadata names<a href=#standard-metadata-names class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name title="The <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.">Element/meta/name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <p>This specification defines a few names for the <code id=standard-metadata-names:attr-meta-name><a href=#attr-meta-name>name</a></code>
  attribute of the <code id=standard-metadata-names:the-meta-element><a href=#the-meta-element>meta</a></code> element.</p>

  <p>Names are case-insensitive<span class=impl>, and must be compared in an <a id=standard-metadata-names:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> manner</span>.</p>

  <dl><dt><dfn data-dfn-for=meta/name id=meta-application-name data-dfn-type=attr-value><code>application-name</code></dfn><dd>
    <p>The value must be a short free-form string giving the name of the web application that the
    page represents. If the page is not a web application, the <code id=standard-metadata-names:meta-application-name><a href=#meta-application-name>application-name</a></code> metadata name must not be used.
    Translations of the web application's name may be given, using the <code id=standard-metadata-names:attr-lang><a href=dom.html#attr-lang>lang</a></code> attribute to specify the language of each name.</p>

    <p>There must not be more than one <code id=standard-metadata-names:the-meta-element-2><a href=#the-meta-element>meta</a></code> element with a given <a id=standard-metadata-names:language href=dom.html#language>language</a>
    and where the <code id=standard-metadata-names:attr-meta-name-2><a href=#attr-meta-name>name</a></code> attribute value is an
    <a id=standard-metadata-names:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
    <code id=standard-metadata-names:meta-application-name-2><a href=#meta-application-name>application-name</a></code> per document.</p>

    

    <p>User agents may use the application name in UI in preference to the page's
    <code id=standard-metadata-names:the-title-element><a href=#the-title-element>title</a></code>, since the title might include status messages and the like relevant to the
    status of the page at a particular moment in time instead of just being the name of the
    application.</p>

    <p>To find the application name to use given an ordered list of languages (e.g. British English,
    American English, and English), user agents must run the following steps:</p>

    <ol><li><p>Let <var>languages</var> be the list of languages.<li><p>Let <var>default language</var> be the <a id=standard-metadata-names:language-2 href=dom.html#language>language</a> of the
     <code id=standard-metadata-names:document><a href=dom.html#document>Document</a></code>'s <a id=standard-metadata-names:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, if any, and if that language is not
     unknown.</p>

     <li><p>If there is a <var>default language</var>, and if it is not the same language
     as any of the languages in <var>languages</var>, append it to <var>languages</var>.<li>
      <p>Let <var>winning language</var> be the first language in <var>languages</var> for which
      there is a <code id=standard-metadata-names:the-meta-element-3><a href=#the-meta-element>meta</a></code> element in the <code id=standard-metadata-names:document-2><a href=dom.html#document>Document</a></code> where the
      <code id=standard-metadata-names:attr-meta-name-3><a href=#attr-meta-name>name</a></code> attribute value is an
      <a id=standard-metadata-names:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
      <code id=standard-metadata-names:meta-application-name-3><a href=#meta-application-name>application-name</a></code> and whose
      <a id=standard-metadata-names:language-3 href=dom.html#language>language</a> is the language in question.</p>

      <p>If none of the languages have such a <code id=standard-metadata-names:the-meta-element-4><a href=#the-meta-element>meta</a></code> element, then return;
      there's no given application name.</p>
     <li>
      <p>Return the value of the <code id=standard-metadata-names:attr-meta-content><a href=#attr-meta-content>content</a></code> attribute of the
      first <code id=standard-metadata-names:the-meta-element-5><a href=#the-meta-element>meta</a></code> element in the <code id=standard-metadata-names:document-3><a href=dom.html#document>Document</a></code> in <a id=standard-metadata-names:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> where the
      <code id=standard-metadata-names:attr-meta-name-4><a href=#attr-meta-name>name</a></code> attribute value is an
      <a id=standard-metadata-names:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for <code id=standard-metadata-names:meta-application-name-4><a href=#meta-application-name>application-name</a></code>
      and whose <a id=standard-metadata-names:language-4 href=dom.html#language>language</a> is <var>winning language</var>.</p>
     </ol>

    <p class=note>This algorithm would be used by a browser when it needs a name for the page, for
    instance, to label a bookmark. The languages it would provide to the algorithm would be the
    user's preferred languages.</p>

    
   <dt><dfn data-dfn-for=meta/name id=meta-author data-dfn-type=attr-value><code>author</code></dfn><dd><p>The value must be a free-form string giving the name of one of the page's
   authors.<dt><dfn data-dfn-for=meta/name id=meta-description data-dfn-type=attr-value><code>description</code></dfn><dd><p>The value must be a free-form string that describes the page. The value must be
   appropriate for use in a directory of pages, e.g. in a search engine. There must not be more than
   one <code id=standard-metadata-names:the-meta-element-6><a href=#the-meta-element>meta</a></code> element where the <code id=standard-metadata-names:attr-meta-name-5><a href=#attr-meta-name>name</a></code> attribute value
   is an <a id=standard-metadata-names:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
   <code id=standard-metadata-names:meta-description><a href=#meta-description>description</a></code> per document.<dt><dfn data-dfn-for=meta/name id=meta-generator data-dfn-type=attr-value><code>generator</code></dfn><dd>
    <p>The value must be a free-form string that identifies one of the software packages used to
    generate the document. This value must not be used on pages whose markup is not generated by
    software, e.g. pages whose markup was written by a user in a text editor.</p>

    <div class=example>

     <p>Here is what a tool called "Frontweaver" could include in its output, in the page's
     <code id=standard-metadata-names:the-head-element><a href=#the-head-element>head</a></code> element, to identify itself as the tool used to generate the page:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>generator</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;Frontweaver 8.2&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt><dfn data-dfn-for=meta/name id=meta-keywords data-dfn-type=attr-value><code>keywords</code></dfn><dd>
    <p>The value must be a <a id=standard-metadata-names:set-of-comma-separated-tokens href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of comma-separated tokens</a>, each of which is a keyword
    relevant to the page.</p>

    <div class=example>

     <p>This page about typefaces on British motorways uses a <code id=standard-metadata-names:the-meta-element-7><a href=#the-meta-element>meta</a></code> element to specify
     some keywords that users might use to look for the page:</p>

     <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Typefaces on UK motorways<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;keywords&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;british,type face,font,fonts,highway,highways&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  ...</code></pre>

    </div>

    <p class=note>Many search engines do not consider such keywords, because this feature has
    historically been used unreliably and even misleadingly as a way to spam search engine results
    in a way that is not helpful for users.</p>

    

    <p>To obtain the list of keywords that the author has specified as applicable to the page, the
    user agent must run the following steps:</p>

    <ol><li><p>Let <var>keywords</var> be an empty list.<li>
      <p>For each <code id=standard-metadata-names:the-meta-element-8><a href=#the-meta-element>meta</a></code> element with a <code id=standard-metadata-names:attr-meta-name-6><a href=#attr-meta-name>name</a></code>
      attribute and a <code id=standard-metadata-names:attr-meta-content-2><a href=#attr-meta-content>content</a></code> attribute and where the <code id=standard-metadata-names:attr-meta-name-7><a href=#attr-meta-name>name</a></code> attribute value is an <a id=standard-metadata-names:ascii-case-insensitive-6 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>
      match for <code id=standard-metadata-names:meta-keywords><a href=#meta-keywords>keywords</a></code>:</p>

      <ol><li><p><a href=https://infra.spec.whatwg.org/#split-on-commas id=standard-metadata-names:split-a-string-on-commas data-x-internal=split-a-string-on-commas>Split the value of the element's <code>content</code> attribute on commas</a>.<li><p>Add the resulting tokens, if any, to <var>keywords</var>.</ol>
     <li><p>Remove any duplicates from <var>keywords</var>.<li><p>Return <var>keywords</var>. This is the list of keywords that the author has
     specified as applicable to the page.</ol>

    <p>User agents should not use this information when there is insufficient confidence in the
    reliability of the value.</p>

    <p class=example>For instance, it would be reasonable for a content management system to use
    the keyword information of pages within the system to populate the index of a site-specific
    search engine, but a large-scale content aggregator that used this information would likely find
    that certain users would try to game its ranking mechanism through the use of inappropriate
    keywords.</p>

    
   <dt><dfn data-dfn-for=meta/name id=meta-referrer data-dfn-type=attr-value><code>referrer</code></dfn><dd>
    <p>The value must be a <a id=standard-metadata-names:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>, which defines the default <a id=standard-metadata-names:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer
    policy</a> for the <code id=standard-metadata-names:document-4><a href=dom.html#document>Document</a></code>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

    

    <p>If any <code id=standard-metadata-names:the-meta-element-9><a href=#the-meta-element>meta</a></code> element <var>element</var> is <a href=infrastructure.html#insert-an-element-into-a-document id=standard-metadata-names:insert-an-element-into-a-document>inserted into the document</a>, or has its <code id=standard-metadata-names:attr-meta-name-8><a href=#attr-meta-name>name</a></code> or <code id=standard-metadata-names:attr-meta-content-3><a href=#attr-meta-content>content</a></code>
    attributes changed, user agents must run the following algorithm:</p>

    <ol><li><p>If <var>element</var> is not <a id=standard-metadata-names:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, then return.<li><p>If <var>element</var> does not have a <code id=standard-metadata-names:attr-meta-name-9><a href=#attr-meta-name>name</a></code>
     attribute whose value is an <a id=standard-metadata-names:ascii-case-insensitive-7 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code id=standard-metadata-names:meta-referrer><a href=#meta-referrer>referrer</a></code>", then return.<li><p>If <var>element</var> does not have a <code id=standard-metadata-names:attr-meta-content-4><a href=#attr-meta-content>content</a></code>
     attribute, or that attribute's value is the empty string, then return.<li><p>Let <var>value</var> be the value of <var>element</var>'s <code id=standard-metadata-names:attr-meta-content-5><a href=#attr-meta-content>content</a></code> attribute, <a id=standard-metadata-names:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII
     lowercase</a>.<li>
      <p>If <var>value</var> is one of the values given in the first column of the following table,
      then set <var>value</var> to the value given in the second column:</p>

      <table><thead><tr><th>Legacy value
         <th>Referrer policy
       <tbody><tr><td><code>never</code>
         <td><code id=standard-metadata-names:referrer-policy-no-referrer><a data-x-internal=referrer-policy-no-referrer href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-no-referrer>no-referrer</a></code>
        <tr><td><code>default</code>
         <td>the <a id=standard-metadata-names:default-referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#default-referrer-policy data-x-internal=default-referrer-policy>default referrer policy</a>
        <tr><td><code>always</code>
         <td><code id=standard-metadata-names:referrer-policy-unsafe-url><a data-x-internal=referrer-policy-unsafe-url href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-unsafe-url>unsafe-url</a></code>
        <tr><td><code>origin-when-crossorigin</code>
         <td><code id=standard-metadata-names:referrer-policy-origin-when-cross-origin><a data-x-internal=referrer-policy-origin-when-cross-origin href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-origin-when-cross-origin>origin-when-cross-origin</a></code>
      </table>
     <li><p>If <var>value</var> is a <a id=standard-metadata-names:referrer-policy-3 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>, then set <var>element</var>'s
     <a id=standard-metadata-names:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=dom.html#concept-document-policy-container id=standard-metadata-names:concept-document-policy-container>policy
     container</a>'s <a href=browsers.html#policy-container-referrer-policy id=standard-metadata-names:policy-container-referrer-policy>referrer policy</a> to
     <var>policy</var>.</ol>

    <p class=note>For historical reasons, unlike other standard metadata names, the processing
    model for <code id=standard-metadata-names:meta-referrer-2><a href=#meta-referrer>referrer</a></code> is not responsive to element removals,
    and does not use <a id=standard-metadata-names:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>. Only the most-recently-inserted or
    most-recently-modified <code id=standard-metadata-names:the-meta-element-10><a href=#the-meta-element>meta</a></code> element in this state has an effect.</p>

    
   <dt><dfn data-dfn-for=meta/name id=meta-theme-color data-dfn-type=attr-value><code>theme-color</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color title="The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color>.">Element/meta/name/theme-color</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span title="Partial implementation.">🔰 73+</span></span><hr><span class="opera no"><span>Opera</span><span>No</span></span><span class="edge_blink yes"><span>Edge</span><span title="Partial implementation.">🔰 79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>80+</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>6.2+</span></span><span class="opera_android no"><span>Opera Android</span><span>No</span></span></div></div></div><dd>
    <p>The value must be a string that matches the CSS <a id=standard-metadata-names:color href=https://drafts.csswg.org/css-color/#typedef-color data-x-internal=color>&lt;color></a> production, defining
    a suggested color that user agents should use to customize the display of the page or of the
    surrounding user interface. For example, a browser might color the page's title bar with the
    specified value, or use it as a color highlight in a tab bar or task switcher.</p>

    <p>Within an HTML document, the <code id=standard-metadata-names:attr-meta-media><a href=#attr-meta-media>media</a></code> attribute value must
    be unique amongst all the <code id=standard-metadata-names:the-meta-element-11><a href=#the-meta-element>meta</a></code> elements with their <code id=standard-metadata-names:attr-meta-name-10><a href=#attr-meta-name>name</a></code> attribute value set to an <a id=standard-metadata-names:ascii-case-insensitive-8 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
    case-insensitive</a> match for <code id=standard-metadata-names:meta-theme-color><a href=#meta-theme-color>theme-color</a></code>.</p>

    <div class=example>

     <p>This standard itself uses "WHATWG green" as its theme color:</p>

     <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->HTML Standard<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;theme-color&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;#3c790a&quot;</c-><c- p>&gt;</c->
...</code></pre>

    </div>

    <p>The <code id=standard-metadata-names:attr-meta-media-2><a href=#attr-meta-media>media</a></code> attribute may be used to describe the context
    in which the provided color should be used.</p>

    <div class=example>
     <p>If we only wanted to use "WHATWG green" as this standard's theme color in dark mode,
     we could use the <code>prefers-color-scheme</code> media feature:</p>

     <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->HTML Standard<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;theme-color&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;#3c790a&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(prefers-color-scheme: dark)&quot;</c-><c- p>&gt;</c->
...</code></pre>
    </div>

    

     <p>To obtain a page's theme color, user agents must run the following steps:</p>

     <ol><li>
       <p>Let <var>candidate elements</var> be the list of all <code id=standard-metadata-names:the-meta-element-12><a href=#the-meta-element>meta</a></code> elements that
       meet the following criteria, in <a id=standard-metadata-names:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

       <ul><li><p>the element is <a id=standard-metadata-names:in-a-document-tree-2 href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>;<li><p>the element has a <code id=standard-metadata-names:attr-meta-name-11><a href=#attr-meta-name>name</a></code> attribute, whose value
        is an <a id=standard-metadata-names:ascii-case-insensitive-9 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for <code id=standard-metadata-names:meta-theme-color-2><a href=#meta-theme-color>theme-color</a></code>; and<li><p>the element has a <code id=standard-metadata-names:attr-meta-content-6><a href=#attr-meta-content>content</a></code> attribute.</ul>
      <li>
       <p>For each <var>element</var> in <var>candidate elements</var>:</p>

       <ol><li><p>If <var>element</var> has a <code id=standard-metadata-names:attr-link-media><a href=#attr-link-media>media</a></code> attribute
        and the value of <var>element</var>'s <code id=standard-metadata-names:attr-meta-media-3><a href=#attr-meta-media>media</a></code>
        attribute does not <a href=common-microsyntaxes.html#matches-the-environment id=standard-metadata-names:matches-the-environment>match the environment</a>, then
        <a id=standard-metadata-names:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>Let <var>value</var> be the result of <a href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace id=standard-metadata-names:strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>stripping leading and trailing ASCII whitespace</a> from the value of
        <var>element</var>'s <code id=standard-metadata-names:attr-meta-content-7><a href=#attr-meta-content>content</a></code> attribute.<li><p>Let <var>color</var> be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id=standard-metadata-names:parsed-as-a-css-color-value data-x-internal=parsed-as-a-css-color-value>parsing</a> <var>value</var>.<li><p>If <var>color</var> is not failure, then return <var>color</var>.</ol>
      <li><p>Return nothing (the page has no theme color).</ol>

     <p>If any <code id=standard-metadata-names:the-meta-element-13><a href=#the-meta-element>meta</a></code> elements are <a href=infrastructure.html#insert-an-element-into-a-document id=standard-metadata-names:insert-an-element-into-a-document-2>inserted into the document</a> or <a href=infrastructure.html#remove-an-element-from-a-document id=standard-metadata-names:remove-an-element-from-a-document>removed from the document</a>, or existing <code id=standard-metadata-names:the-meta-element-14><a href=#the-meta-element>meta</a></code> elements have their
     <code id=standard-metadata-names:attr-meta-name-12><a href=#attr-meta-name>name</a></code>, <code id=standard-metadata-names:attr-meta-content-8><a href=#attr-meta-content>content</a></code>, or
     <code id=standard-metadata-names:attr-link-media-2><a href=#attr-link-media>media</a></code> attributes changed, or if the environment changes
     such that any <code id=standard-metadata-names:the-meta-element-15><a href=#the-meta-element>meta</a></code> element's <code id=standard-metadata-names:attr-link-media-3><a href=#attr-link-media>media</a></code>
     attribute's value may now or may no longer <a href=common-microsyntaxes.html#matches-the-environment id=standard-metadata-names:matches-the-environment-2>match the
     environment</a>, user agents must re-run the above algorithm and apply the result to any
     affected UI.</p>

    

    <p>When using the theme color in UI, user agents may adjust it in implementation-specific ways
    to make it more suitable for the UI in question. For example, if a user agent intends to use
    the theme color as a background and display white text over it, it might use a darker variant of
    the theme color in that part of the UI, to ensure adequate contrast.</p>
   <dt><dfn data-dfn-for=meta/name id=meta-color-scheme data-dfn-type=attr-value><code>color-scheme</code></dfn><dd>
    <p>To aid user agents in rendering the page background with the desired color scheme immediately
    (rather than waiting for all CSS in the page to load), a <a id="standard-metadata-names:'color-scheme'" href=https://drafts.csswg.org/css-color-adjust/#color-scheme-prop data-x-internal="'color-scheme'">'color-scheme'</a> value can
    be provided in a <code id=standard-metadata-names:the-meta-element-16><a href=#the-meta-element>meta</a></code> element.</p>

    <p>The value must be a string that matches the syntax for the CSS <a id="standard-metadata-names:'color-scheme'-2" href=https://drafts.csswg.org/css-color-adjust/#color-scheme-prop data-x-internal="'color-scheme'">'color-scheme'</a>
    property value. It determines the <a id="standard-metadata-names:page's-supported-color-schemes" href=https://drafts.csswg.org/css-color-adjust/#pages-supported-color-schemes data-x-internal="page's-supported-color-schemes">page's supported color-schemes</a>.</p>

    <p>There must not be more than one <code id=standard-metadata-names:the-meta-element-17><a href=#the-meta-element>meta</a></code> element with its <code id=standard-metadata-names:attr-meta-name-13><a href=#attr-meta-name>name</a></code> attribute value set to an
    <a id=standard-metadata-names:ascii-case-insensitive-10 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for <code id=standard-metadata-names:meta-color-scheme><a href=#meta-color-scheme>color-scheme</a></code> per document.</p>

    <div class=example>
     <p>The following declaration indicates that the page is aware of and can handle a color scheme
     with dark background colors and light foreground colors:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;color-scheme&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;dark&quot;</c-><c- p>&gt;</c-></code></pre>
    </div>

    

     <p>To obtain a <a id="standard-metadata-names:page's-supported-color-schemes-2" href=https://drafts.csswg.org/css-color-adjust/#pages-supported-color-schemes data-x-internal="page's-supported-color-schemes">page's supported color-schemes</a>, user agents must run the following steps:</p>

     <ol><li>
       <p>Let <var>candidate elements</var> be the list of all <code id=standard-metadata-names:the-meta-element-18><a href=#the-meta-element>meta</a></code> elements that
       meet the following criteria, in <a id=standard-metadata-names:tree-order-4 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

       <ul><li><p>the element is <a id=standard-metadata-names:in-a-document-tree-3 href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>;<li><p>the element has a <code id=standard-metadata-names:attr-meta-name-14><a href=#attr-meta-name>name</a></code> attribute, whose value
        is an <a id=standard-metadata-names:ascii-case-insensitive-11 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for <code id=standard-metadata-names:meta-color-scheme-2><a href=#meta-color-scheme>color-scheme</a></code>; and<li><p>the element has a <code id=standard-metadata-names:attr-meta-content-9><a href=#attr-meta-content>content</a></code> attribute.</ul>
      <li>
       <p>For each <var>element</var> in <var>candidate elements</var>:</p>

       <ol><li>Let <var>parsed</var> be the result of <a href=https://drafts.csswg.org/css-syntax/#parse-a-list-of-component-values id=standard-metadata-names:parse-a-list-of-component-values data-x-internal=parse-a-list-of-component-values>parsing a list of component values</a> given the value of <var>element</var>'s
        <code id=standard-metadata-names:attr-meta-content-10><a href=#attr-meta-content>content</a></code> attribute.<li>If <var>parsed</var> is a valid CSS <a id="standard-metadata-names:'color-scheme'-3" href=https://drafts.csswg.org/css-color-adjust/#color-scheme-prop data-x-internal="'color-scheme'">'color-scheme'</a> property value, then
        return <var>parsed</var>.</ol>
      <li><p>Return null.</ol>

     <p>If any <code id=standard-metadata-names:the-meta-element-19><a href=#the-meta-element>meta</a></code> elements are <a href=infrastructure.html#insert-an-element-into-a-document id=standard-metadata-names:insert-an-element-into-a-document-3>inserted into the document</a> or <a href=infrastructure.html#remove-an-element-from-a-document id=standard-metadata-names:remove-an-element-from-a-document-2>removed from the document</a>, or existing <code id=standard-metadata-names:the-meta-element-20><a href=#the-meta-element>meta</a></code> elements have their
     <code id=standard-metadata-names:attr-meta-name-15><a href=#attr-meta-name>name</a></code> or <code id=standard-metadata-names:attr-meta-content-11><a href=#attr-meta-content>content</a></code>
     attributes changed, user agents must re-run the above algorithm.</p>

    

    <p class=note>Because these rules check successive elements until they find a match, an
    author can provide multiple such values to handle fallback for legacy user agents. Opposite to
    how CSS fallback works for properties, the multiple meta elements needs to be arranged with the
    legacy values after the newer values.</p>
   </dl>



  <h5 id=other-metadata-names><span class=secno>4.2.5.2</span> Other metadata names<a href=#other-metadata-names class=self-link></a></h5>

  <p>Anyone can create and use their own <dfn id=concept-meta-extensions>extensions to the
  predefined set of metadata names</dfn>. There is no requirement to register such extensions.</p>

  <p>However, a new metadata name should not be created in any of the following cases:</p>

  <ul><li><p>If either the name is a <a id=other-metadata-names:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>, or the value of its accompanying <code id=other-metadata-names:attr-meta-content><a href=#attr-meta-content>content</a></code> attribute is a <a id=other-metadata-names:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>; in those cases,
   registering it as an <a href=links.html#concept-rel-extensions id=other-metadata-names:concept-rel-extensions>extension to the predefined set of
   link types</a> is encouraged (rather than creating a new metadata name).<li><p>If the name is for something expected to have processing requirements in user agents; in
   that case it ought to be standardized.</ul>

  <p>Also, before creating and using a new metadata name, consulting the <a href=https://wiki.whatwg.org/wiki/MetaExtensions>WHATWG Wiki MetaExtensions page</a> is
  encouraged — to avoid choosing a metadata name that's already in use, and to avoid duplicating the
  purpose of any metadata names that are already in use, and to avoid new standardized names
  clashing with your chosen name. <a href=references.html#refsWHATWGWIKI>[WHATWGWIKI]</a></p>

  <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a metadata name.
  New metadata names can be specified with the following information:</p>

  <dl><dt>Keyword<dd><p>The actual name being defined. The name should not be confusingly similar to any other
   defined name (e.g. differing only in case).<dt>Brief description<dd><p>A short non-normative description of what the metadata name's meaning is, including the
   format the value is required to be in.<dt>Specification<dd>A link to a more detailed description of the metadata name's semantics and requirements. It
   could be another page on the wiki, or a link to an external page.<dt>Synonyms<dd><p>A list of other names that have exactly the same processing requirements. Authors should
   not use the names defined to be synonyms (they are only intended to allow user agents to support
   legacy content). Anyone may remove synonyms that are not used in practice; only names that need to
   be processed as synonyms for compatibility with legacy content are to be registered in this
   way.<dt>Status<dd>
    <p>One of the following:</p>

    <dl><dt>Proposed<dd>The name has not received wide peer review and approval. Someone has proposed it and is, or
     soon will be, using it.<dt>Ratified<dd>The name has received wide peer review and approval. It has a specification that
     unambiguously defines how to handle pages that use the name, including when they use it in
     incorrect ways.<dt>Discontinued<dd>The metadata name has received wide peer review and it has been found wanting. Existing
     pages are using this metadata name, but new pages should avoid it. The "brief description" and
     "specification" entries will give details of what authors should use instead, if anything.</dl>

    <p>If a metadata name is found to be redundant with existing values, it should be removed and
    listed as a synonym for the existing value.</p>

    <p>If a metadata name is added in the "proposed" state for a period of a month or more without
    being used or specified, then it may be removed from the WHATWG Wiki MetaExtensions page.</p>

    <p>If a metadata name is added with the "proposed" status and found to be redundant with
    existing values, it should be removed and listed as a synonym for the existing value. If a
    metadata name is added with the "proposed" status and found to be harmful, then it should be
    changed to "discontinued" status.</p>

    <p>Anyone can change the status at any time, but should only do so in accordance with the
    definitions above.</p>
   </dl>



  <h5 id=pragma-directives><span class=secno>4.2.5.3</span> Pragma directives<a href=#pragma-directives class=self-link></a></h5>

  <p>When the <dfn data-dfn-for=meta id=attr-meta-http-equiv data-dfn-type=element-attr><code>http-equiv</code></dfn> attribute is specified on a
  <code id=pragma-directives:the-meta-element><a href=#the-meta-element>meta</a></code> element, the element is a pragma directive.</p>

  <div id=warning-http-equiv-unrelated-to-http-headers class=warning>
   <p>Despite the name <code id=pragma-directives:attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, pragma directives are
   almost entirely unrelated to HTTP headers. Implementers and web developers are best off thinking
   of them as entirely separate, and the name as being a historical accident.</p>

   <p>In more detail, although the <code id=pragma-directives:attr-meta-http-equiv-refresh><a href=#attr-meta-http-equiv-refresh>refresh</a></code>
   keyword has the same processing model as the corresponding `<code id=pragma-directives:refresh><a href=speculative-loading.html#refresh>Refresh</a></code>` header, every
   other standardized pragma directive has at least slightly different behavior than the
   similarly-named header. (And usually dramatically-different behavior.)</p>

   <p>Implementers or specification writers contemplating adding new document-level pragmas or HTTP
   header-controlled switches should be cautious about this mismatch, and avoid perpetuating the
   existing confusion by adding the same or similar behavior to both an HTTP header and an <code id=pragma-directives:attr-meta-http-equiv-2><a href=#attr-meta-http-equiv>http-equiv</a></code> pragma. Instead, consider providing only an HTTP
   header, or if an in-document pragma is needed, consider adding a new attribute to
   <code id=pragma-directives:the-meta-element-2><a href=#the-meta-element>meta</a></code> similar to the model used by the <code id=pragma-directives:attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute. (Note that avoiding in-document pragmas is
   often the better choice, since the DOM is mutable. Thus, even in the simple case where the
   developer does not add, remove, or mutate <code id=pragma-directives:the-meta-element-3><a href=#the-meta-element>meta</a></code> elements, the policy will go from
   un-applied to applied during parsing, which can have complex implications.)</p>
  </div>

  <p>The <code id=pragma-directives:attr-meta-http-equiv-3><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is an <a id=pragma-directives:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table id=table-http-equiv class=yesno><thead><tr><th>Keyword
     <th>Conforming
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-content-language data-dfn-type=attr-value><code>content-language</code></dfn>
     <td class=no>No
     <td><a href=#attr-meta-http-equiv-content-language id=pragma-directives:attr-meta-http-equiv-content-language>Content language</a>
     <td>Sets the <a href=#pragma-set-default-language id=pragma-directives:pragma-set-default-language>pragma-set default language</a>.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-content-type data-dfn-type=attr-value><code>content-type</code></dfn>
     <td>
     <td><a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type>Encoding declaration</a>
     <td>An alternative form of setting the <code id=pragma-directives:attr-meta-charset-2><a href=#attr-meta-charset>charset</a></code>.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-default-style data-dfn-type=attr-value><code>default-style</code></dfn>
     <td>
     <td><a href=#attr-meta-http-equiv-default-style id=pragma-directives:attr-meta-http-equiv-default-style>Default style</a>
     <td>Sets the <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name id=pragma-directives:css-style-sheet-set-name data-x-internal=css-style-sheet-set-name>name</a> of the default
     <a id=pragma-directives:css-style-sheet-set href=https://drafts.csswg.org/cssom/#css-style-sheet-set data-x-internal=css-style-sheet-set>CSS style sheet set</a>.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-refresh data-dfn-type=attr-value><code>refresh</code></dfn>
     <td>
     <td><a href=#attr-meta-http-equiv-refresh id=pragma-directives:attr-meta-http-equiv-refresh-2>Refresh</a>
     <td>Acts as a timed redirect.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-set-cookie data-dfn-type=attr-value><code>set-cookie</code></dfn>
     <td class=no>No
     <td><a href=#attr-meta-http-equiv-set-cookie id=pragma-directives:attr-meta-http-equiv-set-cookie>Set-Cookie</a>
     <td>Has no effect.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-x-ua-compatible data-dfn-type=attr-value><code>x-ua-compatible</code></dfn>
     <td>
     <td><a href=#attr-meta-http-equiv-x-ua-compatible id=pragma-directives:attr-meta-http-equiv-x-ua-compatible>X-UA-Compatible</a>
     <td>In practice, encourages Internet Explorer to more closely follow the specifications.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-content-security-policy data-dfn-type=attr-value><code>content-security-policy</code></dfn>
     <td>
     <td><a href=#attr-meta-http-equiv-content-security-policy id=pragma-directives:attr-meta-http-equiv-content-security-policy>Content security policy</a>
     <td><a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy data-x-internal=enforce-the-policy>Enforces</a> a <a id=pragma-directives:content-security-policy href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security
     Policy</a> on a <code id=pragma-directives:document><a href=dom.html#document>Document</a></code>.
  </table>



  

  <p>When a <code id=pragma-directives:the-meta-element-4><a href=#the-meta-element>meta</a></code> element is <a href=infrastructure.html#insert-an-element-into-a-document id=pragma-directives:insert-an-element-into-a-document>inserted
  into the document</a>, if its <code id=pragma-directives:attr-meta-http-equiv-4><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is
  present and represents one of the above states, then the user agent must run the algorithm
  appropriate for that state, as described in the following list:</p>

  

  <dl><dt><dfn id=attr-meta-http-equiv-content-language>Content language state</dfn>
   (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-content-language><a href=#attr-meta-http-equiv-keyword-content-language>content-language</a></code>"</code>)

   <dd>

    <p class=note>This feature is non-conforming. Authors are encouraged to use the <code id=pragma-directives:attr-lang><a href=dom.html#attr-lang>lang</a></code> attribute instead.</p>

    <p>This pragma sets the <dfn id=pragma-set-default-language>pragma-set default language</dfn>. Until such a pragma is
    successfully processed, there is no <a href=#pragma-set-default-language id=pragma-directives:pragma-set-default-language-2>pragma-set default language</a>.</p>

    

    <ol><li><p>If the <code id=pragma-directives:the-meta-element-5><a href=#the-meta-element>meta</a></code> element has no <code id=pragma-directives:attr-meta-content><a href=#attr-meta-content>content</a></code>
     attribute, then return.<li><p>If the element's <code id=pragma-directives:attr-meta-content-2><a href=#attr-meta-content>content</a></code> attribute contains a
     U+002C COMMA character (,), then return.<li><p>Let <var>input</var> be the value of the element's <code id=pragma-directives:attr-meta-content-3><a href=#attr-meta-content>content</a></code> attribute.<li><p>Let <var>position</var> point at the first character of <var>input</var>.<li><p><a id=pragma-directives:skip-ascii-whitespace href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
     <var>position</var>.<li><p><a id=pragma-directives:collect-a-sequence-of-code-points href=https://infra.spec.whatwg.org/#collect-a-sequence-of-code-points data-x-internal=collect-a-sequence-of-code-points>Collect a sequence of code points</a> that are not <a id=pragma-directives:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
     whitespace</a> from <var>input</var> given <var>position</var>.<li><p>Let <var>candidate</var> be the string that resulted from the previous
     step.<li><p>If <var>candidate</var> is the empty string, return.<li>
      <p>Set the <a href=#pragma-set-default-language id=pragma-directives:pragma-set-default-language-3>pragma-set default language</a> to <var>candidate</var>.</p>

      <p class=note>If the value consists of multiple space-separated tokens, tokens after the
      first are ignored.</p>
     </ol>

    <p class=note>This pragma is almost, but not quite, entirely unlike the HTTP `<code id=pragma-directives:http-content-language><a data-x-internal=http-content-language href=https://httpwg.org/specs/rfc7231.html#header.content-language>Content-Language</a></code>` header of the same name.
    <a href=references.html#refsHTTP>[HTTP]</a></p>
   <dt><dfn id=attr-meta-http-equiv-content-type>Encoding declaration state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-content-type><a href=#attr-meta-http-equiv-keyword-content-type>content-type</a></code>"</code>)

   <dd>
    <p>The <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-2>Encoding declaration state</a> is
    just an alternative form of setting the <code id=pragma-directives:attr-meta-charset-3><a href=#attr-meta-charset>charset</a></code>
    attribute: it is a <a href=#character-encoding-declaration id=pragma-directives:character-encoding-declaration>character encoding declaration</a>. This state's user
    agent requirements are all handled by the parsing section of the specification.</p>

    <p>For <code id=pragma-directives:the-meta-element-6><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-5><a href=#attr-meta-http-equiv>http-equiv</a></code>
    attribute in the <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-3>Encoding declaration
    state</a>, the <code id=pragma-directives:attr-meta-content-4><a href=#attr-meta-content>content</a></code> attribute must have a value
    that is an <a id=pragma-directives:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for a string that consists of:
    "<code>text/html;</code>", optionally followed by any number of <a id=pragma-directives:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
    whitespace</a>, followed by "<code>charset=utf-8</code>".</p>

    <p>A document must not contain both a <code id=pragma-directives:the-meta-element-7><a href=#the-meta-element>meta</a></code> element with an <code id=pragma-directives:attr-meta-http-equiv-6><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-4>Encoding declaration state</a> and a
    <code id=pragma-directives:the-meta-element-8><a href=#the-meta-element>meta</a></code> element with the <code id=pragma-directives:attr-meta-charset-4><a href=#attr-meta-charset>charset</a></code> attribute
    present.</p>

    <p>The <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-5>Encoding declaration state</a> may be
    used in <a id=pragma-directives:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, but elements with an <code id=pragma-directives:attr-meta-http-equiv-7><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in that state must not be used in
    <a id=pragma-directives:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>.</p>
   <dt><dfn id=attr-meta-http-equiv-default-style>Default style state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-default-style><a href=#attr-meta-http-equiv-keyword-default-style>default-style</a></code>"</code>)

   <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets title="Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.">Alternative_style_sheets</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>1–48</span></span><hr><span class="opera yes"><span>Opera</span><span>Yes</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>This pragma sets the <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name id=pragma-directives:css-style-sheet-set-name-2 data-x-internal=css-style-sheet-set-name>name</a> of the default
    <a id=pragma-directives:css-style-sheet-set-2 href=https://drafts.csswg.org/cssom/#css-style-sheet-set data-x-internal=css-style-sheet-set>CSS style sheet set</a>.</p>

    

    <ol><li><p>If the <code id=pragma-directives:the-meta-element-9><a href=#the-meta-element>meta</a></code> element has no <code id=pragma-directives:attr-meta-content-5><a href=#attr-meta-content>content</a></code>
     attribute, or if that attribute's value is the empty string, then return.<li><p><a id=pragma-directives:change-the-preferred-css-style-sheet-set-name href=https://drafts.csswg.org/cssom/#change-the-preferred-css-style-sheet-set-name data-x-internal=change-the-preferred-css-style-sheet-set-name>Change the preferred CSS style sheet set name</a> with the name being the value
     of the element's <code id=pragma-directives:attr-meta-content-6><a href=#attr-meta-content>content</a></code> attribute.
     <a href=references.html#refsCSSOM>[CSSOM]</a></ol>

    
   <dt><dfn id=attr-meta-http-equiv-refresh>Refresh state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-refresh><a href=#attr-meta-http-equiv-keyword-refresh>refresh</a></code>"</code>)

   <dd>
    <p>This pragma acts as a timed redirect.</p>

    <p>A <code id=pragma-directives:document-2><a href=dom.html#document>Document</a></code> object has an associated <dfn data-dfn-for=Document id=will-declaratively-refresh>will declaratively
    refresh</dfn> (a boolean). It is initially false.</p>

    

    <ol><li><p>If the <code id=pragma-directives:the-meta-element-10><a href=#the-meta-element>meta</a></code> element has no <code id=pragma-directives:attr-meta-content-7><a href=#attr-meta-content>content</a></code>
     attribute, or if that attribute's value is the empty string, then return.<li><p>Let <var>input</var> be the value of the element's <code id=pragma-directives:attr-meta-content-8><a href=#attr-meta-content>content</a></code> attribute.<li><p>Run the <a href=#shared-declarative-refresh-steps id=pragma-directives:shared-declarative-refresh-steps>shared declarative refresh steps</a> with the <code id=pragma-directives:the-meta-element-11><a href=#the-meta-element>meta</a></code>
     element's <a id=pragma-directives:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, <var>input</var>, and the <code id=pragma-directives:the-meta-element-12><a href=#the-meta-element>meta</a></code>
     element.</ol>

    <p>The <dfn id=shared-declarative-refresh-steps>shared declarative refresh steps</dfn>, given a <code id=pragma-directives:document-3><a href=dom.html#document>Document</a></code> object
    <var>document</var>, string <var>input</var>, and optionally a <code id=pragma-directives:the-meta-element-13><a href=#the-meta-element>meta</a></code> element
    <var>meta</var>, are as follows:</p>

    <ol><li><p>If <var>document</var>'s <a href=#will-declaratively-refresh id=pragma-directives:will-declaratively-refresh>will declaratively refresh</a> is true, then
     return.<li><p>Let <var>position</var> point at the first <a id=pragma-directives:code-point href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> of
     <var>input</var>.<li><p><a id=pragma-directives:skip-ascii-whitespace-2 href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
     <var>position</var>.<li><p>Let <var>time</var> be 0.<li><p><a id=pragma-directives:collect-a-sequence-of-code-points-2 href=https://infra.spec.whatwg.org/#collect-a-sequence-of-code-points data-x-internal=collect-a-sequence-of-code-points>Collect a sequence of code points</a> that are <a id=pragma-directives:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> from
     <var>input</var> given <var>position</var>, and let <var>timeString</var> be the
     result.<li>
      <p>If <var>timeString</var> is the empty string, then:</p>

      <ol><li><p>If the <a id=pragma-directives:code-point-2 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is not U+002E (.), then return.</ol>
     <li><p>Otherwise, set <var>time</var> to the result of parsing <var>timeString</var> using the
     <a id=pragma-directives:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>.<li><p><a id=pragma-directives:collect-a-sequence-of-code-points-3 href=https://infra.spec.whatwg.org/#collect-a-sequence-of-code-points data-x-internal=collect-a-sequence-of-code-points>Collect a sequence of code points</a> that are <a id=pragma-directives:ascii-digits-2 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and
     U+002E FULL STOP characters (.) from <var>input</var> given <var>position</var>. Ignore any
     collected characters.<li><p>Let <var>urlRecord</var> be <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="pragma-directives:the-document's-address" data-x-internal="the-document's-address">URL</a>.<li>
      <p>If <var>position</var> is not past the end of <var>input</var>, then:</p>

      <ol><li><p>If the <a id=pragma-directives:code-point-3 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is not U+003B (;), U+002C (,), or <a id=pragma-directives:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, then return.<li><p><a id=pragma-directives:skip-ascii-whitespace-3 href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
       <var>position</var>.<li><p>If the <a id=pragma-directives:code-point-4 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is U+003B (;) or U+002C (,), then advance <var>position</var> to the next <a id=pragma-directives:code-point-5 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code
       point</a>.<li><p><a id=pragma-directives:skip-ascii-whitespace-4 href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
       <var>position</var>.</ol>
     <li>
      <p>If <var>position</var> is not past the end of <var>input</var>, then:</p>

      <ol><li><p>Let <var>urlString</var> be the substring of <var>input</var> from the
       <a id=pragma-directives:code-point-6 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> at <var>position</var> to the end of the string.<li><p>If the <a id=pragma-directives:code-point-7 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is U+0055 (U) or U+0075 (u), then advance <var>position</var> to the next <a id=pragma-directives:code-point-8 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code
       point</a>. Otherwise, jump to the step labeled <i>skip quotes</i>.<li><p>If the <a id=pragma-directives:code-point-9 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is U+0052 (R) or U+0072 (r), then advance <var>position</var> to the next <a id=pragma-directives:code-point-10 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code
       point</a>. Otherwise, jump to the step labeled <i>parse</i>.<li><p>If the <a id=pragma-directives:code-point-11 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is U+004C (L) or U+006C (l), then advance <var>position</var> to the next <a id=pragma-directives:code-point-12 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code
       point</a>. Otherwise, jump to the step labeled <i>parse</i>.<li><p><a id=pragma-directives:skip-ascii-whitespace-5 href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
       <var>position</var>.<li><p>If the <a id=pragma-directives:code-point-13 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by <var>position</var>
       is U+003D (=), then advance <var>position</var> to the next <a id=pragma-directives:code-point-14 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a>.
       Otherwise, jump to the step labeled <i>parse</i>.<li><p><a id=pragma-directives:skip-ascii-whitespace-6 href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
       <var>position</var>.<li><p><i>Skip quotes</i>: If the <a id=pragma-directives:code-point-15 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in <var>input</var> pointed to by
       <var>position</var> is U+0027 (') or U+0022 ("), then let <var>quote</var> be that <a id=pragma-directives:code-point-16 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code
       point</a>, and advance <var>position</var> to the next <a id=pragma-directives:code-point-17 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a>. Otherwise,
       let <var>quote</var> be the empty string.<li><p>Set <var>urlString</var> to the substring of <var>input</var> from the <a id=pragma-directives:code-point-18 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code
       point</a> at <var>position</var> to the end of the string.<li><p>If <var>quote</var> is not the empty string, and there is a <a id=pragma-directives:code-point-19 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a> in
       <var>urlString</var> equal to <var>quote</var>, then truncate <var>urlString</var> at that
       <a id=pragma-directives:code-point-20 href=https://infra.spec.whatwg.org/#code-point data-x-internal=code-point>code point</a>, so that it and all subsequent <a href=https://infra.spec.whatwg.org/#code-point id=pragma-directives:code-point-21 data-x-internal=code-point>code
       points</a> are removed.</p>

       <li><p><i>Parse</i>: Set <var>urlRecord</var> to the result of <a id=pragma-directives:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a
       URL</a> given <var>urlString</var>, relative to <var>document</var>.<li><p>If <var>urlRecord</var> is failure, then return.</ol>
     <li><p>Set <var>document</var>'s <a href=#will-declaratively-refresh id=pragma-directives:will-declaratively-refresh-2>will declaratively refresh</a> to true.<li>
      <p>Perform one or more of the following steps:</p>

      <ul><li>
        <p>After the refresh has come due (as defined below), if the user has not canceled the
        redirect and, if <var>meta</var> is given, <var>document</var>'s <a id=pragma-directives:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active sandboxing
        flag set</a> does not have the <a id=pragma-directives:sandboxed-automatic-features-browsing-context-flag href=browsers.html#sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context
        flag</a> set, then <a href=browsing-the-web.html#navigate id=pragma-directives:navigate>navigate</a>
        <var>document</var>'s <a id=pragma-directives:node-navigable href=document-sequences.html#node-navigable>node navigable</a> to <var>urlRecord</var> using
        <var>document</var>, with <i id=pragma-directives:navigation-hh><a href=browsing-the-web.html#navigation-hh>historyHandling</a></i> set to "<code id=pragma-directives:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>".</p>

        <p>For the purposes of the previous paragraph, a refresh is said to have come due as soon as
        the <em>later</em> of the following two conditions occurs:</p>

        <ul><li>At least <var>time</var> seconds have elapsed since <var>document</var>'s
         <a id=pragma-directives:completely-loaded-time href=document-lifecycle.html#completely-loaded-time>completely loaded time</a>, adjusted to take into account user or user agent
         preferences.<li>If <var>meta</var> is given, at least <var>time</var> seconds have elapsed since
         <var>meta</var> was <a href=infrastructure.html#insert-an-element-into-a-document id=pragma-directives:insert-an-element-into-a-document-2>inserted into the
         document</a> <var>document</var>, adjusted to take into account user or user agent
         preferences.</ul>

        <p class=note>It is important to use <var>document</var> here, and not <var>meta</var>'s
        <a id=pragma-directives:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, as that might have changed between the initial set of steps and
        the refresh coming due and <var>meta</var> is not always given (in case of the HTTP
        `<code id=pragma-directives:refresh-2><a href=speculative-loading.html#refresh>Refresh</a></code>` header).</p>
       <li><p>Provide the user with an interface that, when selected, <a href=browsing-the-web.html#navigate id=pragma-directives:navigate-2>navigates</a> <var>document</var>'s <a id=pragma-directives:node-navigable-2 href=document-sequences.html#node-navigable>node
       navigable</a> to <var>urlRecord</var> using <var>document</var>.<li><p>Do nothing.</ul>

      <p>In addition, the user agent may, as with anything, inform the user of any and all aspects
      of its operation, including the state of any timers, the destinations of any timed redirects,
      and so forth.</p>
     </ol>

    

    <p id=conformance-attr-meta-http-equiv-refresh>For <code id=pragma-directives:the-meta-element-14><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-8><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the <a href=#attr-meta-http-equiv-refresh id=pragma-directives:attr-meta-http-equiv-refresh-3>Refresh state</a>, the <code id=pragma-directives:attr-meta-content-9><a href=#attr-meta-content>content</a></code> attribute must have a value consisting either of:</p>

    <ul><li>just a <a id=pragma-directives:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>, or<li>a <a id=pragma-directives:valid-non-negative-integer-2 href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>, followed by a U+003B SEMICOLON character
     (;), followed by one or more <a id=pragma-directives:space-characters-4 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a substring that is
     an <a id=pragma-directives:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>URL</code>",
     followed by a U+003D EQUALS SIGN character (=), followed by a <a id=pragma-directives:valid-url-string href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>valid URL string</a>
     that does not start with a literal U+0027 APOSTROPHE (') or U+0022 QUOTATION MARK (")
     character.</ul>

    <p>In the former case, the integer represents a number of seconds before the page is to be
    reloaded; in the latter case the integer represents a number of seconds before the page is to be
    replaced by the page at the given <a id=pragma-directives:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.</p>

    <div class=example>
     <p>A news organization's front page could include the following markup in the page's
     <code id=pragma-directives:the-head-element><a href=#the-head-element>head</a></code> element, to ensure that the page automatically reloads from the server every
     five minutes:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>http-equiv</c-><c- o>=</c-><c- s>&quot;Refresh&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;300&quot;</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>
     <p>A sequence of pages could be used as an automated slide show by making each page refresh to
     the next page in the sequence, using markup such as the following:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>http-equiv</c-><c- o>=</c-><c- s>&quot;Refresh&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;20; URL=page4.html&quot;</c-><c- p>&gt;</c-></code></pre>
    </div>
   <dt><dfn id=attr-meta-http-equiv-set-cookie>Set-Cookie state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-set-cookie><a href=#attr-meta-http-equiv-keyword-set-cookie>set-cookie</a></code>"</code>)

   <dd>
    <p>This pragma is non-conforming and has no effect.</p>

    <p>User agents are required to ignore this pragma.</p>
   <dt><dfn id=attr-meta-http-equiv-x-ua-compatible>X-UA-Compatible state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-x-ua-compatible><a href=#attr-meta-http-equiv-keyword-x-ua-compatible>x-ua-compatible</a></code>"</code>)

   <dd>
    <p>In practice, this pragma encourages Internet Explorer to more closely follow the
    specifications.</p>

    <p>For <code id=pragma-directives:the-meta-element-15><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-9><a href=#attr-meta-http-equiv>http-equiv</a></code>
    attribute in the <a href=#attr-meta-http-equiv-x-ua-compatible id=pragma-directives:attr-meta-http-equiv-x-ua-compatible-2>X-UA-Compatible state</a>, the
    <code id=pragma-directives:attr-meta-content-10><a href=#attr-meta-content>content</a></code> attribute must have a value that is an
    <a id=pragma-directives:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>IE=edge</code>".</p>

    <p>User agents are required to ignore this pragma.</p>
   <dt><dfn id=attr-meta-http-equiv-content-security-policy data-export="">Content security policy state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-content-security-policy><a href=#attr-meta-http-equiv-keyword-content-security-policy>content-security-policy</a></code>"</code>)

   <dd>
    <p>This pragma <a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy-2 data-x-internal=enforce-the-policy>enforces</a> a <a id=pragma-directives:content-security-policy-2 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security
    Policy</a> on a <code id=pragma-directives:document-4><a href=dom.html#document>Document</a></code>. <a href=references.html#refsCSP>[CSP]</a></p>

    

    <ol><li><p>If the <code id=pragma-directives:the-meta-element-16><a href=#the-meta-element>meta</a></code> element is not a child of a <code id=pragma-directives:the-head-element-2><a href=#the-head-element>head</a></code> element,
     return.<li><p>If the <code id=pragma-directives:the-meta-element-17><a href=#the-meta-element>meta</a></code> element has no <code id=pragma-directives:attr-meta-content-11><a href=#attr-meta-content>content</a></code>
     attribute, or if that attribute's value is the empty string, then return.<li><p>Let <var>policy</var> be the result of executing Content Security Policy's <a id=pragma-directives:parse-a-serialized-content-security-policy href=https://w3c.github.io/webappsec-csp/#parse-serialized-policy data-x-internal=parse-a-serialized-content-security-policy>parse
     a serialized Content Security Policy</a> algorithm on the <code id=pragma-directives:the-meta-element-18><a href=#the-meta-element>meta</a></code> element's
     <code id=pragma-directives:attr-meta-content-12><a href=#attr-meta-content>content</a></code> attribute's value, with a source of "meta",
     and a disposition of "enforce".<li><p>Remove all occurrences of the <code id=pragma-directives:report-uri-directive><a data-x-internal=report-uri-directive href=https://w3c.github.io/webappsec-csp/#report-uri>report-uri</a></code>, <code id=pragma-directives:frame-ancestors-directive><a data-x-internal=frame-ancestors-directive href=https://w3c.github.io/webappsec-csp/#frame-ancestors>frame-ancestors</a></code>, and <code id=pragma-directives:sandbox-directive><a data-x-internal=sandbox-directive href=https://w3c.github.io/webappsec-csp/#sandbox>sandbox</a></code> <a href=https://w3c.github.io/webappsec-csp/#directives id=pragma-directives:content-security-policy-directive data-x-internal=content-security-policy-directive>directives</a> from <var>policy</var>.<li><p><a id=pragma-directives:enforce-the-policy-3 href=https://w3c.github.io/webappsec-csp/#enforced data-x-internal=enforce-the-policy>Enforce the policy</a> <var>policy</var>.</ol>

    

    <p>For <code id=pragma-directives:the-meta-element-19><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-10><a href=#attr-meta-http-equiv>http-equiv</a></code>
    attribute in the <a href=#attr-meta-http-equiv-content-security-policy id=pragma-directives:attr-meta-http-equiv-content-security-policy-2>Content security
    policy state</a>, the <code id=pragma-directives:attr-meta-content-13><a href=#attr-meta-content>content</a></code> attribute must have a
    value consisting of a <a href=https://w3c.github.io/webappsec-csp/#grammardef-serialized-policy id=pragma-directives:content-security-policy-syntax data-x-internal=content-security-policy-syntax>valid Content Security
    Policy</a>, but must not contain any <code id=pragma-directives:report-uri-directive-2><a data-x-internal=report-uri-directive href=https://w3c.github.io/webappsec-csp/#report-uri>report-uri</a></code>,
    <code id=pragma-directives:frame-ancestors-directive-2><a data-x-internal=frame-ancestors-directive href=https://w3c.github.io/webappsec-csp/#frame-ancestors>frame-ancestors</a></code>, or <code id=pragma-directives:sandbox-directive-2><a data-x-internal=sandbox-directive href=https://w3c.github.io/webappsec-csp/#sandbox>sandbox</a></code> <a href=https://w3c.github.io/webappsec-csp/#directives id=pragma-directives:content-security-policy-directive-2 data-x-internal=content-security-policy-directive>directives</a>.
    The <a id=pragma-directives:content-security-policy-3 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security Policy</a> given in the <code id=pragma-directives:attr-meta-content-14><a href=#attr-meta-content>content</a></code> attribute will be <a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy-4 data-x-internal=enforce-the-policy>enforced</a> upon the current document. <a href=references.html#refsCSP>[CSP]</a></p>

    <p class=note>At the time of inserting the <code id=pragma-directives:the-meta-element-20><a href=#the-meta-element>meta</a></code> element to the document, it is
    possible that some resources have already been fetched. For example, images might be stored in
    the <a id=pragma-directives:list-of-available-images href=images.html#list-of-available-images>list of available images</a> prior to dynamically inserting a <code id=pragma-directives:the-meta-element-21><a href=#the-meta-element>meta</a></code>
    element with an <code id=pragma-directives:attr-meta-http-equiv-11><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the <a href=#attr-meta-http-equiv-content-security-policy id=pragma-directives:attr-meta-http-equiv-content-security-policy-3>Content security policy state</a>.
    Resources that have already been fetched are not guaranteed to be blocked by a <a id=pragma-directives:content-security-policy-4 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content
    Security Policy</a> that's <a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy-5 data-x-internal=enforce-the-policy>enforced</a> late.</p>

    <div class=example>

     <p>A page might choose to mitigate the risk of cross-site scripting attacks by preventing the
     execution of inline JavaScript, as well as blocking all plugin content, using a policy such
     as the following:

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>http-equiv</c-><c- o>=</c-><c- s>&quot;Content-Security-Policy&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;script-src &apos;self&apos;; object-src &apos;none&apos;&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>
   </dl>

  <p>There must not be more than one <code id=pragma-directives:the-meta-element-22><a href=#the-meta-element>meta</a></code> element with any particular state in the
  document at a time.</p>


  <h5 id=charset><span class=secno>4.2.5.4</span> Specifying the document's character encoding<a href=#charset class=self-link></a></h5>

  

  <p>A <dfn id=character-encoding-declaration>character encoding declaration</dfn> is a mechanism by which the <a href=https://encoding.spec.whatwg.org/#encoding id=charset:encoding data-x-internal=encoding>character encoding</a> used to store or transmit a document is specified.</p>

  <p>The Encoding standard requires use of the <a id=charset:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a> <a href=https://encoding.spec.whatwg.org/#encoding id=charset:encoding-2 data-x-internal=encoding>character
  encoding</a> and requires use of the "<code>utf-8</code>" <a id=charset:encoding-label href=https://encoding.spec.whatwg.org/#label data-x-internal=encoding-label>encoding label</a>
  to identify it. Those requirements necessitate that the document's <a href=#character-encoding-declaration id=charset:character-encoding-declaration>character encoding
  declaration</a>, if it exists, specifies an <a id=charset:encoding-label-2 href=https://encoding.spec.whatwg.org/#label data-x-internal=encoding-label>encoding label</a> using an <a id=charset:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for "<code>utf-8</code>". Regardless of whether a
  <a href=#character-encoding-declaration id=charset:character-encoding-declaration-2>character encoding declaration</a> is present or not, the actual <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="charset:document's-character-encoding" data-x-internal="document's-character-encoding">character encoding</a> used to encode the document must be
  <a id=charset:utf-8-2 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>. <a href=references.html#refsENCODING>[ENCODING]</a></p>

  <p>To enforce the above rules, authoring tools must default to using <a id=charset:utf-8-3 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>
  for newly-created documents.</p>

  <p>The following restrictions also apply:</p>

  <ul><li>The character encoding declaration must be serialized without the use of <a href=syntax.html#syntax-charref id=charset:syntax-charref>character references</a> or character escapes of any kind.<li id=charset1024><span id=charset512>The element containing the character encoding
   declaration must be serialized completely within the first 1024 bytes of the
   document.</span></ul>

  <p>In addition, due to a number of restrictions on <code id=charset:the-meta-element><a href=#the-meta-element>meta</a></code> elements, there can only be
  one <code id=charset:the-meta-element-2><a href=#the-meta-element>meta</a></code>-based character encoding declaration per document.</p> 

  <p>If an <a href=https://dom.spec.whatwg.org/#html-document id=charset:html-documents data-x-internal=html-documents>HTML document</a> does not start with a BOM, and its
  <a id=charset:encoding-3 href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> is not explicitly given by <a href=urls-and-fetching.html#content-type id=charset:content-type>Content-Type
  metadata</a>, and the document is not <a id=charset:an-iframe-srcdoc-document href=iframe-embed-object.html#an-iframe-srcdoc-document>an <code>iframe</code> <code>srcdoc</code> document</a>, then the encoding must be specified
  using a <code id=charset:the-meta-element-3><a href=#the-meta-element>meta</a></code> element with a <code id=charset:attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute
  or a <code id=charset:the-meta-element-4><a href=#the-meta-element>meta</a></code> element with an <code id=charset:attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>
  attribute in the <a href=#attr-meta-http-equiv-content-type id=charset:attr-meta-http-equiv-content-type>Encoding declaration
  state</a>.</p>

  <div class=note>
   <p>A character encoding declaration is required (either in the <a href=urls-and-fetching.html#content-type id=charset:content-type-2>Content-Type metadata</a> or explicitly in the file) even when all
   characters are in the ASCII range, because a character encoding is needed to process non-ASCII
   characters entered by the user in forms, in URLs generated by scripts, and so forth.</p>

   <p>Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings,
   which use the <a id="charset:document's-character-encoding-2" href=https://dom.spec.whatwg.org/#concept-document-encoding data-x-internal="document's-character-encoding">document's character encoding</a> by default.</p>
  </div>

  <p>If the document is <a id=charset:an-iframe-srcdoc-document-2 href=iframe-embed-object.html#an-iframe-srcdoc-document>an <code>iframe</code> <code>srcdoc</code>
  document</a>, the document must not have a <a href=#character-encoding-declaration id=charset:character-encoding-declaration-3>character encoding declaration</a>. (In
  this case, the source is already decoded, since it is part of the document that contained the
  <code id=charset:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>.)</p>

  <p>In XML, the XML declaration should be used for inline character encoding information, if
  necessary.</p>

  <div class=example>

   <p>In HTML, to declare that the character encoding is <a id=charset:utf-8-4 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>, the author could
   include the following markup near the top of the document (in the <code id=charset:the-head-element><a href=#the-head-element>head</a></code> element):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>charset</c-><c- o>=</c-><c- s>&quot;utf-8&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>In XML, the XML declaration would be used instead, at the very top of the markup:</p>

   <pre><code class='html'><c- cp>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</c-></code></pre>

  </div>



  <h4 id=the-style-element><span class=secno>4.2.6</span> The <dfn data-dfn-type=element><code>style</code></dfn> element<a href=#the-style-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style title="The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.">Element/style</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>3+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement title="The HTMLStyleElement interface represents a <style> element. It inherits properties and methods from its parent, HTMLElement.">HTMLStyleElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/media title="The HTMLStyleElement.media property specifies the intended destination medium for style information.">HTMLStyleElement/media</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-style-element:concept-element-categories>Categories</a>:<dd><a id=the-style-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dt><a href=dom.html#concept-element-contexts id=the-style-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-style-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>In a <code id=the-style-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> element that is a child of a <code id=the-style-element:the-head-element><a href=#the-head-element>head</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-style-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-style-element:text-content>Text</a> that gives a <a id=the-style-element:conformant-style-sheet href=https://drafts.csswg.org/css-syntax/#conform-classes data-x-internal=conformant-style-sheet>conformant style sheet</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-style-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-style-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-style-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-style-element:attr-style-media><a href=#attr-style-media>media</a></code> —  Applicable media
     <dd><code id=the-style-element:attr-style-blocking><a href=#attr-style-blocking>blocking</a></code> —  Whether the element is <a id=the-style-element:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>
     <dd>Also, the <code id=the-style-element:attr-style-title><a href=#attr-style-title>title</a></code> attribute <a href=#attr-style-title id=the-style-element:attr-style-title-2>has special semantics</a> on this element:  <a id=the-style-element:css-style-sheet-set-name href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name data-x-internal=css-style-sheet-set-name>CSS style sheet set name</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-style-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-style>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-style>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-style-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlstyleelement' data-dfn-type='interface'><c- g>HTMLStyleElement</c-></dfn> : <a id='the-style-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-style-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-style-disabled' id='the-style-element:dom-style-disabled'><c- g>disabled</c-></a>;
  [<a id='the-style-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-style-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLStyleElement' id='dom-style-media' data-dfn-type='attribute'><c- g>media</c-></dfn>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-style-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-style-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-style-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLStyleElement' id='dom-style-blocking' data-dfn-type='attribute'><c- g>blocking</c-></dfn>;

  // <a href='obsolete.html#HTMLStyleElement-partial'>also has obsolete members</a>
};
<a href='#htmlstyleelement' id='the-style-element:htmlstyleelement'><c- n>HTMLStyleElement</c-></a> <c- b>includes</c-> <a id='the-style-element:linkstyle' href='https://drafts.csswg.org/cssom/#the-linkstyle-interface' data-x-internal='linkstyle'><c- n>LinkStyle</c-></a>;</code></pre>
   </dl>

  <p>The <code id=the-style-element:the-style-element><a href=#the-style-element>style</a></code> element allows authors to embed CSS style sheets in their documents.
  The <code id=the-style-element:the-style-element-2><a href=#the-style-element>style</a></code> element is one of several inputs to the styling processing
  model. The element does not <a href=dom.html#represents id=the-style-element:represents>represent</a> content for the
  user.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/disabled title="The HTMLStyleElement.disabled property can be used to get and set whether the stylesheet is disabled (true) or not (false).">HTMLStyleElement/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLStyleElement id=dom-style-disabled data-dfn-type=attribute><code>disabled</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=the-style-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> does not have an <a id=the-style-element:associated-css-style-sheet href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>, return
   false.<li><p>If <a id=the-style-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-style-element:associated-css-style-sheet-2 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>'s <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a> is set, return true.<li><p>Return false.</ol>

  <p>The <code id=the-style-element:dom-style-disabled-2><a href=#dom-style-disabled>disabled</a></code> setter steps are:</p>

  <ol><li><p>If <a id=the-style-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> does not have an <a id=the-style-element:associated-css-style-sheet-3 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>,
   return.<li><p>If the given value is true, set <a id=the-style-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-style-element:associated-css-style-sheet-4 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style
   sheet</a>'s <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag-2 data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a>.
   Otherwise, unset <a id=the-style-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-style-element:associated-css-style-sheet-5 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>'s <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag-3 data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a>.</ol>

  <div class=example>
   <p>Importantly, <code id=the-style-element:dom-style-disabled-3><a href=#dom-style-disabled>disabled</a></code> attribute assignments only take
   effect when the <code id=the-style-element:the-style-element-3><a href=#the-style-element>style</a></code> element has an <a id=the-style-element:associated-css-style-sheet-6 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>:</p>

   <pre><code class='js'><c- a>const</c-> style <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;style&apos;</c-><c- p>);</c->
style<c- p>.</c->disabled <c- o>=</c-> <c- kc>true</c-><c- p>;</c->
style<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;body { background-color: red; }&apos;</c-><c- p>;</c->
document<c- p>.</c->body<c- p>.</c->append<c- p>(</c->style<c- p>);</c->
console<c- p>.</c->log<c- p>(</c->style<c- p>.</c->disabled<c- p>);</c-> <c- c1>// false</c-></code></pre>
  </div>

  <p>The <dfn data-dfn-for=style id=attr-style-media data-dfn-type=element-attr><code>media</code></dfn> attribute
  says which media the styles apply to. The value must be a <a id=the-style-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query list</a>.
  The user agent must apply the styles when the <code id=the-style-element:attr-style-media-2><a href=#attr-style-media>media</a></code> attribute's value <a id=the-style-element:matches-the-environment href=common-microsyntaxes.html#matches-the-environment>matches the environment</a> and
  the other relevant conditions apply, and must not apply them otherwise.</p>

  

  <p class=note>The styles might be further limited in scope, e.g. in CSS with the use of <code>@media</code> blocks. This specification does not override such further restrictions or
  requirements.</p>

  

  <p id=style-default-media>The default, if the <code id=the-style-element:attr-style-media-3><a href=#attr-style-media>media</a></code>
  attribute is omitted, is "<code>all</code>", meaning that by default styles apply to all
  media.</p>

  <p>The <dfn data-dfn-for=style id=attr-style-blocking data-dfn-type=element-attr><code>blocking</code></dfn>
  attribute is a <a id=the-style-element:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets title="Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.">Alternative_style_sheets</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>1–48</span></span><hr><span class="opera yes"><span>Opera</span><span>Yes</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p id=title-on-style>The <dfn data-dfn-for=style id=attr-style-title data-dfn-type=element-attr><code>title</code></dfn> attribute on <code id=the-style-element:the-style-element-4><a href=#the-style-element>style</a></code> elements defines
  <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set id=the-style-element:css-style-sheet-set data-x-internal=css-style-sheet-set>CSS style sheet sets</a>. If the <code id=the-style-element:the-style-element-5><a href=#the-style-element>style</a></code> element
  has no <code id=the-style-element:attr-style-title-3><a href=#attr-style-title>title</a></code> attribute, then it has no title; the <code id=the-style-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute of ancestors does not apply to the <code id=the-style-element:the-style-element-6><a href=#the-style-element>style</a></code>
  element. If the <code id=the-style-element:the-style-element-7><a href=#the-style-element>style</a></code> element is not <a id=the-style-element:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, then the <code id=the-style-element:attr-style-title-4><a href=#attr-style-title>title</a></code> attribute is ignored. <a href=references.html#refsCSSOM>[CSSOM]</a></p>

  <p class=note>The <code id=the-style-element:attr-style-title-5><a href=#attr-style-title>title</a></code> attribute on <code id=the-style-element:the-style-element-8><a href=#the-style-element>style</a></code>
  elements, like the <code id=the-style-element:attr-link-title><a href=#attr-link-title>title</a></code> attribute on <code id=the-style-element:the-link-element><a href=#the-link-element>link</a></code>
  elements, differs from the global <code id=the-style-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute in that a
  <code id=the-style-element:the-style-element-9><a href=#the-style-element>style</a></code> block without a title does not inherit the title of the parent element: it
  merely has no title.</p>

  <p>The <a id=the-style-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of a <code id=the-style-element:the-style-element-10><a href=#the-style-element>style</a></code> element must be that of a
  <a id=the-style-element:conformant-style-sheet-2 href=https://drafts.csswg.org/css-syntax/#conform-classes data-x-internal=conformant-style-sheet>conformant style sheet</a>.</p>

  <p>A <code id=the-style-element:the-style-element-11><a href=#the-style-element>style</a></code> element is <a id=the-style-element:implicitly-potentially-render-blocking href=urls-and-fetching.html#implicitly-potentially-render-blocking>implicitly potentially render-blocking</a> if the
  element was created by its <a id=the-style-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s parser.</p>

  <hr>

  

  <p>The user agent must run the <a href=#update-a-style-block id=the-style-element:update-a-style-block>update a <code>style</code> block</a> algorithm whenever
  any of the following conditions occur:</p>
  

  <ul><li><p>The element is popped off the <a id=the-style-element:stack-of-open-elements href=parsing.html#stack-of-open-elements>stack of open elements</a> of an <a id=the-style-element:html-parser href=parsing.html#html-parser>HTML
   parser</a> or <a id=the-style-element:xml-parser href=xhtml.html#xml-parser>XML parser</a>.<li><p>The element is not on the <a id=the-style-element:stack-of-open-elements-2 href=parsing.html#stack-of-open-elements>stack of open elements</a> of an <a id=the-style-element:html-parser-2 href=parsing.html#html-parser>HTML
   parser</a> or <a id=the-style-element:xml-parser-2 href=xhtml.html#xml-parser>XML parser</a>, and it <a id=the-style-element:becomes-connected href=infrastructure.html#becomes-connected>becomes connected</a> or <a href=infrastructure.html#becomes-disconnected id=the-style-element:becomes-disconnected>disconnected</a>.<li><p>The element's <a id=the-style-element:children-changed-steps href=https://dom.spec.whatwg.org/#concept-node-children-changed-ext data-x-internal=children-changed-steps>children changed steps</a> run.</ul>

  <p>The <dfn id=update-a-style-block data-export="">update a <code>style</code> block</dfn> algorithm is as follows:</p>

  <ol><li><p>Let <var>element</var> be the <code id=the-style-element:the-style-element-12><a href=#the-style-element>style</a></code> element.<li><p>If <var>element</var> has an <a id=the-style-element:associated-css-style-sheet-7 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>, <a href=https://drafts.csswg.org/cssom/#remove-a-css-style-sheet id=the-style-element:remove-a-css-style-sheet data-x-internal=remove-a-css-style-sheet>remove the CSS style sheet</a> in question.<li><p>If <var>element</var> is not <a id=the-style-element:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li>
    <p>If <var>element</var>'s <code id=the-style-element:attr-style-type><a href=obsolete.html#attr-style-type>type</a></code> attribute is present and
    its value is neither the empty string nor an <a id=the-style-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
    "<code id=the-style-element:text/css><a href=indices.html#text/css>text/css</a></code>", then return.</p>

    <p class=note>In particular, a <code id=the-style-element:attr-style-type-2><a href=obsolete.html#attr-style-type>type</a></code> value with
    parameters, such as "<code>text/css; charset=utf-8</code>", will cause this algorithm
    to return early.</p>
   <li><p>If the <a id="the-style-element:should-element's-inline-behavior-be-blocked-by-content-security-policy" href=https://w3c.github.io/webappsec-csp/#should-block-inline data-x-internal="should-element's-inline-behavior-be-blocked-by-content-security-policy">Should element's inline behavior be blocked by Content Security
   Policy?</a> algorithm returns "<code>Blocked</code>" when executed upon the
   <code id=the-style-element:the-style-element-13><a href=#the-style-element>style</a></code> element, "<code>style</code>", and the <code id=the-style-element:the-style-element-14><a href=#the-style-element>style</a></code> element's
   <a id=the-style-element:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a>, then return. <a href=references.html#refsCSP>[CSP]</a><li>
    <p><a id=the-style-element:create-a-css-style-sheet href=https://drafts.csswg.org/cssom/#create-a-css-style-sheet data-x-internal=create-a-css-style-sheet>Create a CSS style sheet</a> with the following properties:</p>

    <dl><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-type id=the-style-element:concept-css-style-sheet-type data-x-internal=concept-css-style-sheet-type>type</a><dd><p><code id=the-style-element:text/css-2><a href=indices.html#text/css>text/css</a></code><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-owner-node id=the-style-element:concept-css-style-sheet-owner-node data-x-internal=concept-css-style-sheet-owner-node>owner node</a><dd><p><var>element</var><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-media id=the-style-element:concept-css-style-sheet-media data-x-internal=concept-css-style-sheet-media>media</a><dd>
      <p>The <code id=the-style-element:attr-style-media-4><a href=#attr-style-media>media</a></code> attribute of <var>element</var>.</p>

      <p class=note>This is a reference to the (possibly absent at this time) attribute, rather
      than a copy of the attribute's current value. <cite>CSSOM</cite> defines what happens
      when the attribute is dynamically set, changed, or removed.</p>
     <dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-title id=the-style-element:concept-css-style-sheet-title data-x-internal=concept-css-style-sheet-title>title</a><dd>
      <p>The <code id=the-style-element:attr-style-title-6><a href=#attr-style-title>title</a></code> attribute of <var>element</var>, if
      <var>element</var> is <a id=the-style-element:in-a-document-tree-2 href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, or the empty string otherwise.</p>

      <p class=note>Again, this is a <em>reference</em> to the attribute.</p>
     <dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-alternate-flag id=the-style-element:concept-css-style-sheet-alternate-flag data-x-internal=concept-css-style-sheet-alternate-flag>alternate flag</a><dd><p>Unset.<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-origin-clean-flag id=the-style-element:concept-css-style-sheet-origin-clean-flag data-x-internal=concept-css-style-sheet-origin-clean-flag>origin-clean flag</a><dd><p>Set.<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-location id=the-style-element:concept-css-style-sheet-location data-x-internal=concept-css-style-sheet-location>location</a><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-parent-css-style-sheet id=the-style-element:concept-css-style-sheet-parent-css-style-sheet data-x-internal=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</a><dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-owner-css-rule id=the-style-element:concept-css-style-sheet-owner-css-rule data-x-internal=concept-css-style-sheet-owner-css-rule>owner CSS rule</a><dd><p>null<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag-4 data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a><dd><p>Left at its default value.<dt><a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-css-rules id=the-style-element:concept-css-style-sheet-css-rules data-x-internal=concept-css-style-sheet-css-rules>CSS rules</a><dd>
      <p>Left uninitialized.</p>

      <p class=XXX>This doesn't seem right. Presumably we should be using the element's
      <a id=the-style-element:child-text-content-3 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a>? Tracked as <a href=https://github.com/whatwg/html/issues/2997>issue #2997</a>.</p>
     </dl>
   <li><p>If <var>element</var> <a href=#contributes-a-script-blocking-style-sheet id=the-style-element:contributes-a-script-blocking-style-sheet>contributes a script-blocking style sheet</a>, <a href=https://infra.spec.whatwg.org/#set-append id=the-style-element:set-append data-x-internal=set-append>append</a> <var>element</var> to its <a id=the-style-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
   <a href=#script-blocking-style-sheet-set id=the-style-element:script-blocking-style-sheet-set>script-blocking style sheet set</a>.<li><p>If <var>element</var>'s <code id=the-style-element:attr-style-media-5><a href=#attr-style-media>media</a></code> attribute's value
   <a id=the-style-element:matches-the-environment-2 href=common-microsyntaxes.html#matches-the-environment>matches the environment</a> and <var>element</var> is
   <a id=the-style-element:potentially-render-blocking-2 href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>, then <a id=the-style-element:block-rendering href=dom.html#block-rendering>block rendering</a> on
   <var>element</var>.</ol>

  
  <p>Once the attempts to obtain the style sheet's <a id=the-style-element:critical-subresources href=infrastructure.html#critical-subresources>critical subresources</a>, if any, are
  complete, or, if the style sheet has no <a id=the-style-element:critical-subresources-2 href=infrastructure.html#critical-subresources>critical subresources</a>, once the style sheet
  has been parsed and processed, the user agent must run these steps:</p>

  <p class=XXX>Fetching the <a id=the-style-element:critical-subresources-3 href=infrastructure.html#critical-subresources>critical subresources</a> is not well-defined; probably <a href=https://github.com/whatwg/html/issues/968>issue #968</a> is the best resolution for that.
  In the meantime, any <a href=infrastructure.html#critical-subresources id=the-style-element:critical-subresources-4>critical subresource</a> <a href=https://fetch.spec.whatwg.org/#concept-request id=the-style-element:concept-request data-x-internal=concept-request>request</a> should have its <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=the-style-element:concept-request-render-blocking data-x-internal=concept-request-render-blocking>render-blocking</a> set to whether or not the
  <code id=the-style-element:the-style-element-15><a href=#the-style-element>style</a></code> element is currently <a id=the-style-element:render-blocking href=dom.html#render-blocking>render-blocking</a>.</p>

  <ol><li><p>Let <var>element</var> be the <code id=the-style-element:the-style-element-16><a href=#the-style-element>style</a></code> element associated with the style sheet
   in question.<li><p>Let <var>success</var> be true.<li>
    <p>If the attempts to obtain any of the style sheet's <a id=the-style-element:critical-subresources-5 href=infrastructure.html#critical-subresources>critical subresources</a> failed
    for any reason (e.g., DNS error, HTTP 404 response, a connection being prematurely closed,
    unsupported Content-Type), set <var>success</var> to false.</p>

    <p class=note>Note that content-specific errors, e.g., CSS parse errors or PNG decoding
    errors, do not affect <var>success</var>.</p>
   <li>
    <p><a id=the-style-element:queue-an-element-task href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id=the-style-element:networking-task-source href=webappapis.html#networking-task-source>networking task source</a> given
    <var>element</var> and the following steps:</p>

    <ol><li><p>If <var>success</var> is true, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-style-element:concept-event-fire data-x-internal=concept-event-fire>fire an event</a>
     named <code id=the-style-element:event-load><a href=indices.html#event-load>load</a></code> at <var>element</var>.<li><p>Otherwise, <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-style-element:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=the-style-element:event-error><a href=indices.html#event-error>error</a></code> at <var>element</var>.<li>
      <p>If <var>element</var> <a href=#contributes-a-script-blocking-style-sheet id=the-style-element:contributes-a-script-blocking-style-sheet-2>contributes a script-blocking style sheet</a>:</p>

      <ol><li><p><a id=the-style-element:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var>'s <a id=the-style-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
       <a href=#script-blocking-style-sheet-set id=the-style-element:script-blocking-style-sheet-set-2>script-blocking style sheet set</a> <a href=https://infra.spec.whatwg.org/#list-contain id=the-style-element:list-contains data-x-internal=list-contains>contains</a>
       <var>element</var>.<li><p><a href=https://infra.spec.whatwg.org/#list-remove id=the-style-element:list-remove data-x-internal=list-remove>Remove</a> <var>element</var> from its <a id=the-style-element:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
       document</a>'s <a href=#script-blocking-style-sheet-set id=the-style-element:script-blocking-style-sheet-set-3>script-blocking style sheet set</a>.</ol>
     <li><p><a id=the-style-element:unblock-rendering href=dom.html#unblock-rendering>Unblock rendering</a> on <var>element</var>.</ol>
   </ol>

  <p>The element must <a id=the-style-element:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of the element's <a id=the-style-element:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> until all the
  attempts to obtain the style sheet's <a id=the-style-element:critical-subresources-6 href=infrastructure.html#critical-subresources>critical subresources</a>, if any, are complete.</p>

  

  <p class=note>This specification does not specify a style system, but CSS is expected to be
  supported by most web browsers. <a href=references.html#refsCSS>[CSS]</a></p>

  <p>The <code id=the-style-element:linkstyle-2><a data-x-internal=linkstyle href=https://drafts.csswg.org/cssom/#the-linkstyle-interface>LinkStyle</a></code> interface is also implemented by this element. <a href=references.html#refsCSSOM>[CSSOM]</a></p>

  <div class=example>

   <p>The following document has its stress emphasis styled as bright red text rather than italics
   text, while leaving titles of works and Latin words in their default italics. It shows how using
   appropriate elements enables easier restyling of documents.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-US&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->My favorite book<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
   <c- f>body</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>black</c-><c- p>;</c-> <c- k>background</c-><c- p>:</c-> <c- kc>white</c-><c- p>;</c-> <c- p>}</c->
   <c- f>em</c-> <c- p>{</c-> <c- k>font-style</c-><c- p>:</c-> <c- kc>normal</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c-> <c- p>}</c->
  <c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->favorite<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> book of all time has <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->got<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> to be
  <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->A Cat&apos;s Life<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->. It is a book by P. Rahmel that talks
  about the <c- p>&lt;</c-><c- f>i</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;la&quot;</c-><c- p>&gt;</c->Felis catus<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> in modern human society.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  </div>



  

  <h4 id=interactions-of-styling-and-scripting><span class=secno>4.2.7</span> Interactions of styling and scripting<a href=#interactions-of-styling-and-scripting class=self-link></a></h4>

  <p>If the style sheet referenced no other resources (e.g., it was an internal style sheet given by
  a <code id=interactions-of-styling-and-scripting:the-style-element><a href=#the-style-element>style</a></code> element with no <code>@import</code> rules), then the style rules
  must be <a id=interactions-of-styling-and-scripting:immediately href=infrastructure.html#immediately>immediately</a> made available to script; otherwise, the style rules must only be
  made available to script once the <a id=interactions-of-styling-and-scripting:event-loop href=webappapis.html#event-loop>event loop</a> reaches its <a id=interactions-of-styling-and-scripting:update-the-rendering href=webappapis.html#update-the-rendering>update the
  rendering</a> step.</p>

  <p id=a-style-sheet-that-is-blocking-scripts>An element <var>el</var> in the context of a
  <code id=interactions-of-styling-and-scripting:document><a href=dom.html#document>Document</a></code> of an <a id=interactions-of-styling-and-scripting:html-parser href=parsing.html#html-parser>HTML parser</a> or <a id=interactions-of-styling-and-scripting:xml-parser href=xhtml.html#xml-parser>XML parser</a> <dfn id=contributes-a-script-blocking-style-sheet>contributes a
  script-blocking style sheet</dfn> if all of the following are true:</p>

  <ul><li><p><var>el</var> was created by that <code id=interactions-of-styling-and-scripting:document-2><a href=dom.html#document>Document</a></code>'s parser.<li><p><var>el</var> is either a <code id=interactions-of-styling-and-scripting:the-style-element-2><a href=#the-style-element>style</a></code> element or a <code id=interactions-of-styling-and-scripting:the-link-element><a href=#the-link-element>link</a></code> element that
   was an <a href=links.html#link-type-stylesheet id=interactions-of-styling-and-scripting:link-type-stylesheet>external resource link that contributes to the styling
   processing model</a> when the <var>el</var> was created by the parser.<li><p><var>el</var>'s <code>media</code> attribute's value
   <a id=interactions-of-styling-and-scripting:matches-the-environment href=common-microsyntaxes.html#matches-the-environment>matches the environment</a>.<li><p><var>el</var>'s style sheet was enabled when the element was created by the
   parser.<li><p>The last time the <a id=interactions-of-styling-and-scripting:event-loop-2 href=webappapis.html#event-loop>event loop</a> reached <a href=webappapis.html#step1>step 1</a>,
   <var>el</var>'s <a id=interactions-of-styling-and-scripting:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> was that <code id=interactions-of-styling-and-scripting:document-3><a href=dom.html#document>Document</a></code>.<li>
    <p>The user agent hasn't given up on loading that particular style sheet yet. A user agent
    may give up on loading a style sheet at any time.</p>

    <p class=note>Giving up on a style sheet before the style sheet loads, if the style sheet
    eventually does still load, means that the script might end up operating with incorrect
    information. For example, if a style sheet sets the color of an element to green, but a script
    that inspects the resulting style is executed before the sheet is loaded, the script will find
    that the element is black (or whatever the default color is), and might thus make poor choices
    (e.g., deciding to use black as the color elsewhere on the page, instead of green). Implementers
    have to balance the likelihood of a script using incorrect information with the performance impact
    of doing nothing while waiting for a slow network request to finish.</p>
   </ul>

  <p class=XXX>It is expected that counterparts to the above rules also apply to
  <code id=interactions-of-styling-and-scripting:xml-stylesheet><a data-x-internal=xml-stylesheet href=https://www.w3.org/TR/xml-stylesheet/#the-xml-stylesheet-processing-instruction>&lt;?xml-stylesheet?></a></code> PIs. However, this has not yet been thoroughly
  investigated.</p>

  <p>A <code id=interactions-of-styling-and-scripting:document-4><a href=dom.html#document>Document</a></code> has a <dfn id=script-blocking-style-sheet-set>script-blocking style sheet set</dfn>, which is an <a href=https://infra.spec.whatwg.org/#ordered-set id=interactions-of-styling-and-scripting:set data-x-internal=set>ordered set</a>, initially empty.</p>

  <p>A <code id=interactions-of-styling-and-scripting:document-5><a href=dom.html#document>Document</a></code> <var>document</var> <dfn id=has-a-style-sheet-that-is-blocking-scripts>has a style sheet that is blocking
  scripts</dfn> if the following steps return true:</p>

  <ol><li><p>If <var>document</var>'s <a href=#script-blocking-style-sheet-set id=interactions-of-styling-and-scripting:script-blocking-style-sheet-set>script-blocking style sheet set</a> is not <a href=https://infra.spec.whatwg.org/#list-is-empty id=interactions-of-styling-and-scripting:list-is-empty data-x-internal=list-is-empty>empty</a>, then return true.<li><p>If <var>document</var>'s <a id=interactions-of-styling-and-scripting:node-navigable href=document-sequences.html#node-navigable>node navigable</a> is null, then return false.<li><p>Let <var>containerDocument</var> be <var>document</var>'s <a id=interactions-of-styling-and-scripting:node-navigable-2 href=document-sequences.html#node-navigable>node navigable</a>'s
   <a href=document-sequences.html#nav-container id=interactions-of-styling-and-scripting:nav-container>container document</a>.<li><p>If <var>containerDocument</var> is non-null and <var>containerDocument</var>'s
   <a href=#script-blocking-style-sheet-set id=interactions-of-styling-and-scripting:script-blocking-style-sheet-set-2>script-blocking style sheet set</a> is not <a href=https://infra.spec.whatwg.org/#list-is-empty id=interactions-of-styling-and-scripting:list-is-empty-2 data-x-internal=list-is-empty>empty</a>,
   then return true.<li><p>Return false.</ol>

  <p>A <code id=interactions-of-styling-and-scripting:document-6><a href=dom.html#document>Document</a></code> <dfn id=has-no-style-sheet-that-is-blocking-scripts>has no style sheet that is blocking scripts</dfn> if it does not
  <a href=#has-a-style-sheet-that-is-blocking-scripts id=interactions-of-styling-and-scripting:has-a-style-sheet-that-is-blocking-scripts>have a style sheet that is blocking
  scripts</a>.</p>

  




  <nav><a href=dom.html>← 3 Semantics, structure, and APIs of HTML documents</a> — <a href=./>Table of Contents</a> — <a href=sections.html>4.3 Sections →</a></nav>
